setTimeout不会延迟$ .each中的函数调用 [英] setTimeout not delaying function call in $.each

问题描述

我的网站上有几个div，我想逐一更新。为了避免一次发送超过200个请求的垃圾邮件，我希望每个邮件延迟1秒。

我试过的：

  var $ tourBox = $（'。tour-box'）; 
 $ tourBox.each（function（）{
 var $ box = $（this）; $ b $ setTimeout（function（）{
 getUpdate（$ box）; 
 }，1000）; 
}）; 
  

更新函数：

  function getUpdate（$ box）{
 
 var $ so = $ box.attr（'data-so'）; 
 var $ url = $（'＃ajax-route-object-status'）。val（）; 
 $ .get（$ url，{
 so：$ so 
}）。success（function（data）{
 var $ bg ='bg-grey'; 
 if（data.extra.isStarted === true& amp; data.extra.isFinished === false）{
 $ bg ='bg-orange'
} 
 if （data.extra.isStarted === true& amp; data.extra.isFinished === true）{
 $ bg ='bg-green'
} 
 if（data。 extra.isLate === true&& data.extra.isFinished === false）{
 $ bg ='bg-red'
} 
 $ box.removeClass（'bg '）。removeClass（'bg-green'）。removeClass（'bg-orange'）。removeClass（'bg-red'）。addClass（$ bg）; 
}）; 
} 
  

在Chrome Dev - > Network中，加载他们一个接一个，但没有延迟：

<正如你在3907和3940之间可以看到的那样，只有半秒的延迟。这不会改变，即使我有超时5000.

解决方案

你的每个人都调用所有的超时。在每次打电话时都不会等待一秒钟。因此，您有成千上万的对象计划在一秒钟后调用 getUpdate（$ box）; 。

你可以做的是增加每次迭代的超时。

  var $ tourBox = $（'。tour-box'）; 
 var delay = 1000; 
 $ tourBox.each（function（）{
 var $ box = $（this）; $ b $ setTimeout（function（）{
 getUpdate（$ box）; 
 }，延迟）; 
 delay + = 1000; 
}）; 
  

这将导致您的第一次超时在1秒后被触发，开。

I several divs on my site, I'd like to update one by one. In order not to spam the server with 200+ requests at once, I'd like to delay them by 1s each.

What I tried:

var $tourBox = $('.tour-box');
$tourBox.each(function () {
    var $box = $(this);
    setTimeout(function () {
        getUpdate($box);
    }, 1000);
});

The update function:

function getUpdate($box) {

    var $so = $box.attr('data-so');
    var $url = $('#ajax-route-object-status').val();
    $.get($url, {
        so: $so
    }).success(function (data) {
        var $bg = 'bg-gray';
        if (data.extra.isStarted === true && data.extra.isFinished === false) {
            $bg = 'bg-orange'
        }
        if (data.extra.isStarted === true && data.extra.isFinished === true) {
            $bg = 'bg-green'
        }
        if (data.extra.isLate === true && data.extra.isFinished === false) {
            $bg = 'bg-red'
        }
        $box.removeClass('bg-gray').removeClass('bg-green').removeClass('bg-orange').removeClass('bg-red').addClass($bg);
    });
}

In Chrome Dev--> Network it shows the all loaded as pending and then loads them one by one, but w/out the delay:

As you can see between 3907 and 3940, there is merely half a second delay. This doesn't change even if I have a timeout of 5000.

解决方案

Your for each is calling all of the timeouts at once. It is not waiting one second in between calling each time out. So you have thousands of objects that are being scheduled to call getUpdate($box); after one second.

What you can do is increase the timeout in each iteration.

var $tourBox = $('.tour-box');
var delay = 1000;
$tourBox.each(function () {
    var $box = $(this);
    setTimeout(function () {
        getUpdate($box);
    }, delay);
    delay += 1000;
});

This will cause your first timeout to be fired after 1 second, and your second after two seconds and so on.

这篇关于setTimeout不会延迟$ .each中的函数调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！