为什么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/