通过 JQuery 从循环中进行同步 Ajax 调用

Question

我的代码中有下面的循环，每次迭代都会调用一个函数，其中有一个 Ajax 调用。

我试图找到一种方法，使每次迭代仅在前一次迭代完成后运行。

到目前为止，如您所见，我使用延迟作为临时解决方案。

有没有一种巧妙的方法让它同步？

谢谢！

$.each(matchIds, function(key,val){
        setTimeout(function(){
            gettingEvents(key, val,userID);
        },delay);
        delay+=1700;

    });

Answer 1

如果它们真的是同步的，那么简单地不使用 setTimeout就可以完成这项工作。

$.each(matchIds, function(key,val){
    gettingEvents(key, val,userID);
});

然而，这是一种糟糕的方法，它会在所有请求运行时占用 JS 事件循环。 请改用异步请求。 在成功处理程序中而不是在each循环中迭代。

var match_id_keys = Object.keys(matchIds);
var i = 0;
get_next();

function get_next() {
    if (!match_id_keys[i]) {
        return;
    }
    var key = match_id_keys[i];
    var val = matchIds[key];
    $.ajax( ... ).done(function () {
        // Do stuff with data
        i++;
        get_next();
    });
}

在 2020 年，我们现在对async和await有了不错的浏览器支持，它们是管理 Promise 的工具，因此可以将其编写为更简单的循环：

异步函数 get_all_ids(matchIds) { const entries = Object.entries(matchIds); for (let i = 0; i < entry.length; i++) { const [key, val] = entries[i]; const 数据 = 等待 $.ajax(...); // 处理数据 } }