しばらくするとsetIntervalが正常に動作しないのはなぜですか？

Question

私は10秒ごとにランダムな見積もりを表示するためのjavascriptコードを書いています。 jqueryを使ってdivとsetIntervalを更新し、アクションを繰り返します。私は、javascript配列からランダムな引用を取得しています。

しかし、これをテストすると、しばらくして（3〜5分のように）うまく動作していないように見えますが、fadeInやfadeOutのようなjqueryエフェクトがいくつかあります。ここに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)]; 

Q：はどのように私は期待通りに働いて得るために、このコードを向上させることができますか？

ありがとうございます。

Answer 1

このようにして、イベントキューは無期限に拡大します。この場合に使用したいのはおそらくsetIntervalではなくsetTimeoutです。このリンクを試すことをおすすめします：http://ejohn.org/blog/how-javascript-timers-work/