javascript - 按顺序加载 API 请求 (JavaScript)

Question

我正在编写的脚本在 for 循环中进行了多次 API 调用。问题在于某些 API 调用比其他 API 调用需要更长的加载时间，因此信息在页面上的加载顺序是乱序的。

例如，我将对对象 1-8 进行 API 调用，但它们将按以下顺序加载:4、3、1、2、7、5、6、8

代码基本如下:

function loadData() {
    for (var i = 0; i < 8; i++) {
        $.getJSON("http://theapi.com/data" + i, function(data) {
            var div = "<div>" + data + "</div>";
            browserElement.innerHTML += div;
        });
    }
}

如何强制 JavaScript 在第一个 API 调用完成之前不加载第二个 API 调用？

编辑:使用“promises”链接 API 调用会导致脚本等待显示数据，直到所有数据都已加载。这不是一个理想的结果，因为如果有足够的数据，用户可能需要等待几秒钟以上才能看到任何东西。

Answer 1

在循环中创建所有 div，然后在数据可用时填充数据

function loadData() {
    for (var i = 0; i < 8; i++) {
        let div = document.createElement("div");
        browserElement.innerHTML += div;

        $.getJSON("http://theapi.com/data" + i, function(data) {
            div.innerHTML = data;
        });
    }
}