javascript - 本地存储的加载顺序不正确

问题描述

我在从本地存储加载时遇到问题。

这是代码的一部分

const getTerminus = () => {
  let terminus;
  if (localStorage.getItem("terminus") === null) {
    terminus = [];
  } else {
    terminus = JSON.parse(localStorage.getItem("terminus"));
  }

  let directions;
  if (localStorage.getItem("directions") === null) {
    directions = [];
  } else {
    directions = JSON.parse(localStorage.getItem("directions"));
  }

  terminus.forEach(async(stop) => {
    let API_URL =
      "https://ckan.multimediagdansk.pl/dataset/c24aa637-3619-4dc2-a171-a23eec8f2172/resource/d3e96eb6-25ad-4d6c-8651-b1eb39155945/download/stopsingdansk.json";
    let response = await fetch(API_URL);
    let data = await response.json();

    const {
      stops,
      stopId,
      stopName,
      stopCode,
      zoneId
    } = data;

    let input = stop;
    let ID;
    let dataArr = [];

    for (let i = 0; i < stops.length; i++) {
      if (
        stops[i].stopName === input &&
        stops[i].stopCode === directions[terminus.indexOf(input)] &&
        stops[i].zoneId === 1
      ) {
        ID = stops[i].stopId;

        dataArr = [ID, stops[i].stopName];
      }
    }

    API_URL = `https://ckan2.multimediagdansk.pl/delays?stopId=${ID}`;

    response = await fetch(API_URL);
    data = await response.json();

    const {
      delay,
      estimatedTime,
      routeId,
      headsign
    } = data;

    let times = [];
    let routeIds = [];
    let headsigns = [];
    for (let i = 0; i < delay.length; i++) {
      times.push(delay[i].estimatedTime);
      routeIds.push(delay[i].routeId);
      headsigns.push(delay[i].headsign);

    }
    routeIds.push(" ");
    times.push(" ");

    const cardDiv = document.createElement("div");
    cardDiv.classList.add("card");

    const stopNameDiv = document.createElement("div");
    stopNameDiv.classList.add("stop-name-div");
    cardDiv.appendChild(stopNameDiv);

    const stopNameSpan = document.createElement("span");
    stopNameSpan.innerText = dataArr[1];
    stopNameSpan.classList.add("stop-name-span");
    stopNameDiv.appendChild(stopNameSpan);

    const scheduleDiv = document.createElement("div");
    scheduleDiv.classList.add("schedule-div");
    cardDiv.appendChild(scheduleDiv);

    if (headsigns.length !== 0) {
      routeIds.unshift("Line");
      headsigns.unshift("Direction");
      times.unshift("Departure");
    }

    const lineSpan = document.createElement("span");
    lineSpan.innerText = routeIds.join("\n");
    lineSpan.classList.add("line-span");
    scheduleDiv.appendChild(lineSpan);

    const dirSpan = document.createElement("span");
    dirSpan.innerText = headsigns.join("\n");
    dirSpan.classList.add("dir-span");
    scheduleDiv.appendChild(dirSpan);

    const timeSpan = document.createElement("span");
    timeSpan.innerText = times.join("\n");
    timeSpan.classList.add("time-span");
    scheduleDiv.appendChild(timeSpan);

    const buttonsDiv = document.createElement("div");
    buttonsDiv.classList.add("buttons-div");
    cardDiv.appendChild(buttonsDiv);

    const deleteButton = document.createElement("button");
    deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
    deleteButton.classList.add("delete-button");
    buttonsDiv.appendChild(deleteButton);

    const dirButton = document.createElement("button");
    dirButton.innerHTML = '<i class="fas fa-retweet"></i>';
    dirButton.classList.add("reverse-button");
    buttonsDiv.appendChild(dirButton);

    stopList.appendChild(cardDiv);
  });
};
document.addEventListener("DOMContentLoaded", getTerminus);

终点站包含停靠点名称，方向包含方向代码。

刷新时，它会根据站点名称和方向从 API 获取数据，并显示带有出发时间等的卡片。问题是，在关闭和重新打开页面时，卡片有时会以错误的顺序显示。我发现，随着收盘和开盘之间的时间延长，发生这种情况的可能性会更高。简单刷新后，一切都按正确顺序排列。

它与浏览器缓存有关吗？有没有人有类似的问题或知道发生了什么？

标签： javascriptfetchlocal-storage

javascript - 本地存储的加载顺序不正确

问题描述

解决方案

推荐阅读