Performance issuse when calling setTImeout differently

Question

Consider the following block of code

var interval = setTimeout(function()
    {

        var left = parseInt(self.element.style.left) - 10;
        var width = parseInt(self.element.style.width) + 10;

        if(width <= self.width)
        {

            self.element.style.left = left + "px";
            self.element.style.width = width + "px";
            setTimeout(increaseWidthLeft(self), 10);

        }
        else
        {

            window.clearInterval(interval);

        }

    }, 5);

And this one:

var interval = setTimeout(function()
    {

        var left = parseInt(self.element.style.left) - 10;
        var width = parseInt(self.element.style.width) + 10;

        if(width <= self.width)
        {

            self.element.style.left = left + "px";
            self.element.style.width = width + "px";
            setTimeout(function(){increaseWidthLeft(self);}, 10);

        }
        else
        {

            window.clearInterval(interval);

        }

    }, 5);

They are almost the same right? But when i'm running the first version the "animation" is running with stunning speed... however the second one is running almost 3 times slower than the first one. What is going on here? Any help is very appreciated

I'm not sure if this has anything to do with your problem but your setting a `Timeout` and clearing an `Interval`. You should be using `clearTimeout()`. `clearInterval()` and `clearTimeout()` are not interchangeable. See [this](http://stackoverflow.com/questions/9913719/are-cleartimeout-and-clearinterval-the-same#answer-9913940) answer for more details. — War10ck, Dec 16 '13 at 14:41
For any future visitors, the way the W3C specs are defined make it so clearInterval and clearTimeout are interchangable. Still good to use the right one for code readability, but functionality-wise, they should be doing the exact same thing. https://stackoverflow.com/questions/9913719/are-cleartimeout-and-clearinterval-the-same — Steve, Jul 12 '18 at 02:49

score 0 · Answer 1 · answered Jul 12 '18 at 02:46

I'm going to bring this back from the grave because I was digging into some similar timing issues with setTimeout and stumbled on your question. Hopefully this helps someone.

The extremely subtle differences between the code versions lie in the use of the anonymous function in the second example, vs the plain predefined one in the first.

When you run setTimeout(increaseWidthLeft(self), 10); javascript does exactly what you'd expect. It runs increaseWidthLeft(self) after the delay is complete. Very straight forward.

When you run function(){increaseWidthLeft(self);} it's actually creating a function that then runs increaseWidthLeft(self). As soon as that function is done running, it's ditched, only to be created again on the next loop. It's that creation overhead that must be slowing down the code.

It does make sense that the second one would run slower, although I admit that I'm surprised that it was so noticeable. Still, useful info if you ever need a boost in timeout precision.

Unfortunately, none of this applies to the problem I'm having, so I'll continue my hunt. ;)

Performance issuse when calling setTImeout differently

1 Answers1