从本地存储加载顺序不正确

Question

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

这是部分代码

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);

Terminus 包含停靠点名称，directions 包含方向代码。

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

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

Answer 1

好吧，正如@Yoshi 所说，这是不连续的承诺错误。我设法通过使用 reduce() 修复了它。

以下是对我有帮助的话题

Resolve promises one after another (i.e. in sequence)?

Why Using reduce() to Sequentially Resolve Promises Works

从本地存储加载顺序不正确

Incorrect loading order from local storage

javascript

fetch

local-storage