延遲JavaScript的函數執行

我有一個JQuery的.each循環每次迭代調用一個參數的函數，有沒有辦法延遲這個函數調用？我嘗試了setTimeout，如下所示，但這不起作用，因爲函數立即執行。延遲JavaScript的函數執行

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

function showDetails(dataitem) 
{ 
... 
}

數組的大小大約是20，我想要做的就是分佈函數調用超過一定時限，而不是立即，任何想法如何實現這一目標？我準備重寫和重構函數如何調用以完成此任務，任何幫助將不勝感激。

來源

2011-03-20 Maya

執行肯定是延期。但是循環不是，即所有20個'setTimout'或多或少被稱爲一次。你想一個接一個地調用'showDetail'函數嗎？我的意思是，第一次在300ms後，第二次在600ms後，等等。 – 2011-03-20 22:56:16

你可以使用數組的索引來計算動態區間：

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

來源

2011-03-20 22:58:54

現在我已經重新閱讀了這個問題，這聽起來像提問者試圖做的事情。 +1 – 2011-03-20 23:00:41

真的需要'window.'前綴嗎？我不認爲任何人都會掩蓋'setTimeout'的名字。 – 2011-03-20 23:31:30

@ŠimeVidas，我更喜歡總是使用正確的範圍。這只是一個好習慣。 – 2011-03-20 23:32:26

您在300毫秒後執行它們全部。相反，嘗試這樣的事：

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

編輯：而不是一次，我認爲這是更好地做到這一點一一創建20個計時器。功能應該是：

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是平原全局數組，並將處理一個項目，然後才與延遲撥打下一個項目。

來源

2011-03-20 22:56:59

謝謝你，我已經嘗試過這一點，它的工作原理，我選擇了第一個答案，因爲它更容易閱讀代碼。 +1 :) – Maya 2011-03-21 20:12:32

@Maya歡呼，很高興它爲你工作。 :-) – 2011-03-22 08:03:04

看看jQuery.queue([ queueName ], callback(next))。這允許你排隊調用函數，這是jQuery的動畫效果在內部使用的。

這聽起來像你想要實現一個隊列，雖然這並不完全清楚你的意圖。

編輯：重新閱讀您的問題，我認爲其他答案更符合您的想法，但我認爲我會告訴你一個如何使用自定義隊列實現延遲函數執行的例子。

安example of how you could use a 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-20 22:57:14

這實際上是有用的知道。 +1 :) – Maya 2011-03-21 20:10:34

只要不使用$.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-20 23:02:02 paztulio

延遲JavaScript的函數執行

回答

相關問題