javascript - 在整个表上一一运行 Ajax 请求

Question

我有一个包含近 300 多行的表。在页面加载时，我需要调用ajax请求来通过数据库中的row_id更新每行的status。当成功时，将响应附加到相应行的列中。之后为下一行运行 ajax，依此类推。

我的尝试

$('table tbody tr').each(function(){
   var tracking = $(this).attr('id');
  setInterval(function(){
   $.ajax({
      ...
      success: function(){ 
         //append here 
      }
   });
  }, 1000);

问题

这样，当页面加载时，它会创建几乎所有行的请求，如果记录太多，页面就会卡住。

有没有简单的方法可以在每一行上逐一执行ajax？

Answer 1

好的，我很乐意提供一个实用的方法来做到这一点。

首先，按照问题中的方式进行操作肯定会导致浏览器停止运行，因为您将同时执行多个异步请求。如果发生这种情况，大多数浏览器都会发出警告。

现在，另一种方法是将下一个 ajax 调用包含在您的 complete() 回调中，并在数组中维护您在每个请求上发送的数据。我使用递归函数来实现此目的

var tracker = [];

$('table tbody tr').each(function(){
    tracker.push($(this).attr('id'));
});

makeRequest(tracker);

function makeRequest(tracker) {
    $.ajax({
        // ajax settings
        data: {'id': tracker.pop()},
        success: function() {
            // use returned result here
        },
        complete: function() {
            if(tracker.length) {
                makeRequest(tracker);
            }
            else return;
        }
    });
}

拜托，这只是实验性的。任何有建议或修改的人都可以提出。