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