setTimeoutで$ .eachの関数呼び出しが遅れていない

Question

私のサイトにいくつかのdivがありますが、私は1つずつ更新したいと思います。一度に200以上のリクエストでサーバーを迷惑メールにしないために、それぞれ1秒ずつ遅延させたいと思います。 >ネットワーク、それはすべてが保留し、それらを一つずつロードとしてロードされますが、ワット示し - クロームdevに

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

：

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

更新機能：私が試した何

/アウト遅延：

あなたが39との間に見ることができるように07および3940では、単に半秒の遅延があります。タイムアウトが5000になってもこれは変わりません。

Answer 1

それぞれがすべてのタイムアウトを一度に呼び出しています。それは毎回呼び出すことの間に1秒間待たない。したがって、1秒後にgetUpdate($box);と呼ぶ予定の何千ものオブジェクトがあります。

各繰り返しでタイムアウトを増やすことができます。

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

これにより、1秒後に最初のタイムアウトが発生し、2秒後に2回目のタイムアウトが発生します。

Answer 2

2008年に私はあなたが探しているものをa slowEach() plugin for jQueryと書きました。それは基本的にドロップイン$.each()と$(...).each()の交換の時間間隔をとりますので、コールバックが各要素の遅延の量と呼ばれている：

jQuery.slowEach = function(array, interval, callback) { 
    if(! array.length) return; 
    var i = 0; 
    next(); 
    function next() { 
     if(callback.call(array[i], i, array[i]) !== false) { 
      if(++i < array.length) { 
       setTimeout(next, interval); 
      } 
     } 
    } 
}; 

jQuery.fn.slowEach = function(interval, callback) { 
    jQuery.slowEach(this, interval, callback); 
}; 

そのコードを使用すると、その後、行うことができます。

$('.tour-box').slowEach(1000, function() { 
    getUpdate($(this)); 
}); 

このコードの注意点の1つは、数百のsetTimeout()コールで複数のタイマーを同時に起動するのではなく、一度に1つのタイマーしか使用しないことです。これにより、システムリソースがはるかに簡単になります。

Answer 3

他の解決方法を避けるにはスパムのようなものがあります。 この場合、解決策になる可能性があります。

$(document).ready(function(){ 

    var $tourBox = $('.tour-box'), 
     curIndex = 0, 
     totalBox = $tourBox.length, 
     url = $('#ajax-route-object-status').val(), 


    function getUpdate(){ 

     var $box = $tourBox.get(curIndex); 

     if (typeof $box === 'undefined'){ 
      // No more box to process 
      return; // exit 
     } 

     var $so = $box.attr('data-so'); 

     $.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); 
     }).always(function(){ 

      // Increment index to process 
      curIndex++; 

      // Finished either with success or failed 
      // Proceed with next 
      getUpdate(); 
     });  
    } 
});