JavaScript 循环输出的顺序不正确 - 如何解决这个问题？

Question

我编写了一个 JavaScript 循环，它应该获取 8 个 arrays 并将它们以特定顺序存储在 localStorage 中。它可以工作，但是顺序有点混乱：值都“向下移动”localStorage 中的一个键，即最后一个值被放入第一个键，第一个值被放入第二个键，等等。我尝试了for 循环和“自建”循环，它们都给出了相同的结果。这是代码，我将在底部做更多解释。

var i = -1;

function getstats() {
    i = i + 1;
    if (i > -1 && i < 9) {
        var ids = document.getElementById("battle_deck_block_" + i).getElementsByTagName("img")[0].id;

        var tribe;
        if (ids < 117603 && ids > 100000) {
            tribe = "Xana";
        } else if (ids < 213403 && ids > 200000) {
            tribe = "Hemi";
        } else {
            tribe = "Theri";
        }

        var referenceurl = "Dot_files/Trade/" + tribe + "/" + ids + ".js";

        var temp = document.createElement("SCRIPT");
        var src = document.createAttribute("src");
        src.value = referenceurl;
        temp.setAttributeNode(src);
        document.head.appendChild(temp);

        var hp = sessionStorage.getItem("minhp");
        var atk = sessionStorage.getItem("minatk");
        var def = sessionStorage.getItem("mindef");
        var wis = sessionStorage.getItem("minwis");
        var agi = sessionStorage.getItem("minagi");

        var stats = [hp, atk, def, wis, agi];

        localStorage.setItem("fighter" + i + "_stats", JSON.stringify(stats));

        document.head.removeChild(temp);

    } else if (i > 8 || i < 0) {
        return;
    };
};
setInterval(getstats, 200);

所以基本上，这是一个为我正在为游戏开发的战斗系统获取角色统计数据的函数。 该函数基于角色的id 构建一个参考URL，并将其设置为src 用于同样在函数中创建的script 标记（此标记稍后会被删除并为每个循环重新创建）。 script 标记中使用的每个源文件都是一个 JavaScript 文件，它在 sessionStorage 值中设置角色的统计信息。然后将这些值放入相应的变量中，然后将变量放入数组中并存储在localStorage 中以供以后使用。 现在，正如我之前提到的，除了localStorage 值的顺序之外，这一切都很好。这就是我寻求帮助的地方。

有人可以检查我的代码并提出一个可以修复localStorage 中值顺序的解决方案吗？我可以根据需要发布更多代码/解释。

干杯。

~DM

Answer 1

正如 Pointy 提到的，您的问题是在运行 localStorage 代码之前，代码不会暂停以等待下载并执行获取的脚本。这意味着该脚本第一次运行时， sessionStorage 值将为空，第一个循环将为空，第二个循环将具有来自第一个脚本的值，依此类推。当您第二次运行脚本时，上次运行的最后一个值在 sessionStorage 中，因此第一个键获取最后一个值，等等。

您可以通过 (1) 使用脚本标签的 onload 事件和 (2) 使用闭包来冻结脚本的 i 状态（因为它会随着循环的继续而改变）来解决这个问题。

var i = -1;

function getClosure(i, temp) {
    // Inside this closure, the current values of i and temp are preserved.
    return function() {
        var hp = sessionStorage.getItem("minhp");
        var atk = sessionStorage.getItem("minatk");
        var def = sessionStorage.getItem("mindef");
        var wis = sessionStorage.getItem("minwis");
        var agi = sessionStorage.getItem("minagi");

        var stats = [hp, atk, def, wis, agi];

        localStorage.setItem("fighter" + i + "_stats", JSON.stringify(stats));

        document.head.removeChild(temp);
    }
}

function getstats() {
    i = i + 1;
    if (i > -1 && i < 9) {
        var ids = document.getElementById("battle_deck_block_" + i).getElementsByTagName("img")[0].id;

        var tribe;
        if (ids < 117603 && ids > 100000) {
           tribe = "Xana";
        } else if (ids < 213403 && ids > 200000) {
           tribe = "Hemi";
        } else {
           tribe = "Theri";
        }

        var referenceurl = "Dot_files/Trade/" + tribe + "/" + ids + ".js";

        var temp = document.createElement("SCRIPT");
        var src = document.createAttribute("src");
        src.value = referenceurl;
        temp.setAttributeNode(src);
        // The function returned by getClosure() will be executed after this script loads
        temp.onload = getClosure(i, temp);
        document.head.appendChild(temp);

    } else if (i > 8 || i < 0) {
        return;
    };
};
setInterval(getstats, 200);