以不同方式调用 setTImeout 时的性能问题答案

【问题标题】：Performance issuse when calling setTImeout differently以不同方式调用 setTImeout 时的性能问题
【发布时间】：2013-12-16 14:33:45
【问题描述】：

考虑下面的代码块

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);

还有这个：

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);

它们几乎一样吧？但是当我运行第一个版本时，“动画”以惊人的速度运行......但是第二个版本的运行速度比第一个版本慢了近 3 倍。这里发生了什么？非常感谢任何帮助

【问题讨论】：

我不确定这是否与您的问题有关，但您设置了 Timeout 并清除了 Interval。你应该使用clearTimeout()。 clearInterval() 和 clearTimeout() 不可互换。有关详细信息，请参阅this 答案。
感谢您指出这一点。
对于任何未来的访问者，W3C 规范的定义方式使得 clearInterval 和 clearTimeout 可以互换。使用正确的代码可读性仍然很好，但在功能方面，它们应该做完全相同的事情。 stackoverflow.com/questions/9913719/…

标签： performance settimeout

【解决方案1】：

我打算把它从坟墓里带回来，因为我正在研究一些与 setTimeout 类似的时间问题，并偶然发现了你的问题。希望这对某人有所帮助。

代码版本之间极其细微的区别在于第二个示例中使用了匿名函数，而第一个示例中使用了普通的预定义函数。

当您运行setTimeout(increaseWidthLeft(self), 10); 时，javascript 完全符合您的预期。它在延迟完成后运行increaseWidthLeft(self)。非常直接。

当您运行function(){increaseWidthLeft(self);} 时，它实际上是创建一个然后运行increaseWidthLeft(self) 的函数。一旦该函数完成运行，它就会被丢弃，只能在下一个循环中再次创建。正是这种创建开销一定会减慢代码的速度。

第二个会运行得更慢是有道理的，尽管我承认我很惊讶它如此引人注目。如果您需要提高超时精度，这仍然是有用的信息。

不幸的是，这些都不适用于我遇到的问题，所以我会继续寻找。 ;)

【讨论】：