Why setInterval is not working properly after a while?
<p>I have written a javascript code to show users a random quote every 10 second. I use jquery to update the div and setInterval to repeat the action. I'm fetching a random quote from a javascript array. </p>

<p>But when i tested this, it seems, it is not working properly after a while (like 3-5 mins) , I have some jquery effects like fadeIn and fadeOut but they are executed before the quote changes. Here is the js code;</p>

<pre><code>var quotes = [
    "Some String",
    "Some String",
    "Some String"
];

$(function() {
    var $rand = $('div#randomQuote &gt; 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 &gt; 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);
});
</code></pre>

<p>Although I'm not sure, I think, these lines take some time to calculate and it breaks the loop.   </p>

<pre><code>var $rand = $('div#randomQuote &gt; p');
var random_quote = quotes[Math.floor(Math.random() * quotes.length)]; 
</code></pre>

<p><strong>Q:</strong> How can i improve this code to get it working as expected? </p>

<p>Thanks in advance.</p>
