為什么setInterval一段時間后無法正常工作？

Question

我寫了一個JavaScript代碼，向用戶顯示每10秒隨機的報價。 我使用jquery更新div和setInterval以重復該操作。 我正在從JavaScript數組中獲取隨機報價。

但是，當我對此進行測試時，似乎在一段時間（如3-5分鍾）后無法正常工作，我有一些jquery效果，例如fadeIn和fadeOut，但它們在報價更改之前執行。 這是js代碼；

var quotes = [
    "Some String",
    "Some String",
    "Some String"
];

$(function() {
    var $rand = $('div#randomQuote > p');
    var random_quote = quotes[Math.floor(Math.random() * quotes.length)];     
    $rand.html(random_quote);
    $rand.animate( {"opacity" : 0}, 0);
    $rand.animate( {"opacity" : 1}, 500);
    $rand.delay("9000");
    $rand.animate( { "opacity" : 0 }, 500 );    
});


function randomQuote () {
    var $rand = $('div#randomQuote > p');
    var random_quote = quotes[Math.floor(Math.random() * quotes.length)]; 
    $rand.html(random_quote);
    $rand.animate( {"opacity" : 1}, 500 );
    $rand.delay("9000");
    $rand.animate ( {"opacity" : 0}, 500 );
}

$(function () {
    setInterval(randomQuote, 10000);
});

盡管我不確定，但我認為這些行需要一些時間來計算，因此會中斷循環。

var $rand = $('div#randomQuote > p');
var random_quote = quotes[Math.floor(Math.random() * quotes.length)]; 

問：如何改善此代碼以使其按預期工作？

提前致謝。

Answer 1

這樣，您的事件隊列將無限期增長。 在這種情況下，您要使用的可能是setTimeout而不是setInterval。 我建議嘗試以下鏈接： http : //ejohn.org/blog/how-javascript-timers-work/