8

.each反復ごとにパラメータを持つ関数を呼び出すJQuery のループがあります。この関数呼び出しを遅らせる方法はありますか? 次のように試しsetTimeoutましたが、関数がすぐに実行されるため、これは機能しません。

$.each(myArray, function (j, dataitem)
{
     setTimeout(function () { showDetails(dataitem) }, 300);
});

function showDetails(dataitem)
{
...
}

配列のサイズはおよそ 20 です。私がしようとしているのは、関数呼び出しをすぐにではなく特定の時間枠に分散することです。これを達成する方法はありますか? これを行うために関数が呼び出される方法を書き直して再構築する準備ができています。助けていただければ幸いです。

4

4 に答える 4

10

配列のインデックスを使用して、間隔を動的に計算できます。

$.each(myArray, function (j, dataitem) {
    window.setTimeout(function () { 
        showDetails(dataitem) 
    }, (j + 1) * 300);
});
于 2011-03-20T22:58:54.587 に答える
2

300 ミリ秒後にすべて実行します。代わりに、次のようにしてみてください。

window.setTimeout(function () { showDetails(dataitem) }, (j + 1) * 300);

編集: 一度に 20 個のタイマーを作成する代わりに、1 つずつ作成する方がよいと思います。機能は次のとおりです。

function showDetails(index)
{
   if (index >= myArray.length)
      return false;
   var dataItem = myArray[index];
   //code here......
   //code here......
   //code here......
   windows.setTimeout(function() { showDetails(index + 1); }, 300);
}

最初の呼び出しは次のようになります。

$(document).ready(function() {
{
   showDetails(0);
});

これmyArrayは単純なグローバル配列であると想定し、1 つのアイテムを処理してから次のアイテムを遅延して呼び出します。

于 2011-03-20T22:56:59.493 に答える
2

をご覧くださいjQuery.queue([ queueName ], callback( next ))。これにより、呼び出される関数をキューに入れることができ、jQuery のアニメーション効果が内部で使用するものになります。

キューを実装したいようですが、そうする意図は完全には明らかではありません。

編集：あなたの質問を読み直して、他の答えがあなたが求めているものによりよく一致すると思いますが、カスタムキューで関数の実行を遅らせる方法の例を示すと思いました。

queue の使用例。

var myArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
    output = $('#output');

// set the queue up
$.each(myArray, function (j, dataitem) {
    output.queue('queue', function(next) {
        var that = this;
        showDetails(dataitem);  
        window.setTimeout(next,300);
    });
});

// start the queue running.
output.dequeue('queue');

function showDetails(dataitem) {
    output.append('<div>' + dataitem + '</div>');
}
于 2011-03-20T22:57:14.523 に答える
0

を使用しないでください$.each。ただし、次のようなものです。

var data = [1, 2, 3, 4, 5];

function showDetails(values, delay) {
  console.log(values.shift()); //show the value
  if (values.length) {
    setTimeout(function() {showDetails(values, delay); }, delay); //schedule next elem
  }
}

showDetails(data.slice(0), 300); //dont forget the slice, call-by-reference
于 2011-03-20T23:02:02.503 に答える