How to re-factor code to use setInterval?
<p>According to this </p>

<p><a href="http://stackoverflow.com/questions/729921/settimeout-or-setinterval/731625#731625">SO Article</a></p>

<p>I am having non-smooth animation b.c. I am using setTimeout instead of setInterval.</p>

<p>How can I update my code to use setInterval instead:</p>

<p>Also, I had previously heard something of the opposite, but the article above has so many up-votes I assume it is correct.</p>

<p><strong>snippet</strong></p>

<pre><code>FOO.prototype.fade = function (direction, max_time) {
    var statics = {},
        elements = this;
    statics.elapsed = 0;
    statics.granularity = 10;
    if (statics.timeout_id) {
        clearTimeout(statics.timeout_id);
    }
    function next() {
        var kindex,
            opacity;
        statics.elapsed += statics.granularity;
        if (direction === 'up') {
            for (kindex in elements) {
                if(elements.hasOwnProperty(kindex)) {
                    opacity = statics.elapsed / max_time
                    elements[kindex].style.opacity = opacity;
                }
            }
        } else if (direction === 'down') {
            for (kindex in elements) {
                if(elements.hasOwnProperty(kindex)) {
                    elements[kindex].style.opacity = (max_time - statics.elapsed) / max_time;
                }
            }
        }
        if (statics.elapsed &lt; max_time) {
            statics.timeout_id = setTimeout(next, statics.granularity);  // here is setTimeout
        }
    }
    next();
};
</code></pre>
