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

Question

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

我的尝试

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

问题

以这种方式，当页面加载时，如果记录太多，它会为几乎所有行和页面创建请求。

有什么简单的方法可以在每一行上一个一个地执行ajax吗？

Answer 1

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

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

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

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

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