Question

考虑以下代码块

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倍。这里发生了什么？非常感谢任何帮助

Answer 1

我要把这件事从坟墓中找回来，因为我正在研究setTimeout的一些类似计时问题，偶然发现了您的问题。希望这对某人有帮助。

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

当您运行setTimeout(increaseWidthLeft(self), 10);时，javascript会完全满足您的期望。延迟完成后，它将运行increaseWidthLeft(self)。非常直接。

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

第二个处理器的运行速度确实是有道理的，尽管我承认我对此感到如此惊讶感到惊讶。不过，如果您需要提高超时精度，该信息还是有用的。

不幸的是，这都不适用于我遇到的问题，因此我将继续寻找。 ;）

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

1 个答案: