代码之家 › 专栏 › 技术社区 › JBel

执行多个AJAX请求的正确方法是什么,这样每个请求都在setInterval()中?

setinterval promise ajax javascript

JBel · 技术社区 · 6 年前

我有一个2D数组,其中包含一组数组,每个数组都包含一组URL字符串(以及关于该URL的其他数据)。

我们把二维数组中的数组称为“ 外部阵列 ,然后调用 外部阵列 “作为” 内部数组 ".

我需要循环遍历2D数组,对于它包含的每个外部数组,我需要每隔10秒发送一个AJAX请求(10秒的间隔是可变的,对于不同的url是不同的),这将一直持续下去(除非用户停止它)。如果AJAX请求的响应成功,UI上就会发生一些事情,即我将在DOM中进行更改。

问题是我想同时发送所有这些AJAX请求,即同时异步发送(如果我正确理解了这个词)。

请看下面的代码。它有一个循环。它的问题是它有一个循环,其中有一个 setInterval 函数已调用。假设在循环的第一次迭代中, setInterval() 将开始每10秒发送一次AJAX请求,但由于setInterval()和AJAX是异步的,因此控件将转到循环的第二次迭代,然后该过程继续。

我觉得我做这件事的方式不对。这里有些混乱。所以请告诉我我做得是否正确,还是应该用另一种方式?

for (var outerArray in big2DArray) {
  setInterval(function() {
    $.ajax({
        url: "...",
        method: "...",
        success: function(dataReturned, status, jqXHR) {
            alert("At this point we make some change in DOM");
        },
        error: function(jqXHR, status, exception) {
            alert("error");
        }
    });
   }, 60000);
}

1 回复 | 直到 6 年前

Jonas Wilms 6 年前

如果您希望并行运行请求,我将始终确保在启动另一个请求之前完成上一个请求,否则可能会创建超出连接管理能力的请求。如果中间的延迟足够大,则代码完全正确,否则可以执行以下操作:

 const delay = ms => new Promise(res => setTimeout(res, ms));


 for (const outerArray of big2DArray) { // dont confuse for..of with for..in
  (async function() {
    while(true) {
      try {
        const result = await $.ajax({ // wait for the call to be done
          url: "...",
          method: "...",
        });
        // Work with result
     } catch(error) {
        // Handle connection errors
     }
     await delay(60000); // then wait for a slight delay before continuing
    }
   })();
 }

或者,如果您想一个接一个地运行一个请求:

你要么选择这样的延迟循环:

 const delay = ms => new Promise(res => setTimeout(res, ms));

 (async function() {
   for (const outerArray of big2DArray) { // dont confuse for..of with for..in
    try {
       const result = await $.ajax({ // wait for the call to be done
          url: "...",
          method: "...",
       });
       // Work with result
    } catch(error) {
       // Handle connection errors
    }
    await delay(60000); // then wait for a slight delay before continuing
   }
 })();

或递归伪循环:

 (function next(index) { // entry point for recursive calls
    if(index >= outerArray.length) return;
    var outerArray = big2DArray[index];
    setTimeout(function() {
      $.ajax({
          url: "...",
          method: "...",
          success: function(dataReturned, status, jqXHR) {
             alert("At this point we make some change in DOM");
             next(i + 1); // continue with the next one
          },
          error: function(jqXHR, status, exception) {
              alert("error");
          }
      });
     }, 60000);
 })(0); // start with index = 0