Почему 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)]; 

Q: Как я могу улучшить этот код, чтобы заставить его работать, как ожидалось?

Заранее спасибо.

Answer 1

Таким образом ваша очередь событий будет расти бесконечно. То, что вы хотите использовать в этом случае, вероятно, установлено вTimeout вместо setInterval. Я предлагаю попробовать эту ссылку: http://ejohn.org/blog/how-javascript-timers-work/