为什么多次 setTimeout() 调用会导致如此多的延迟？

Question

我有一个复杂的动画序列，涉及 JavaScript 中的淡入淡出和过渡。在这个由四个同时变化的元素组成的序列中，每个元素都使用setTimeout。

在 Internet Explorer 9 中测试，动画以实时速度运行（它应该需要 1.6 秒，而它恰好需要 1.6 秒）。任何其他浏览器都会严重滞后，动画时间为 4 秒（Firefox 3 和 4、Chrome、Opera），而在 IE 8 及更低版本中则为 20 秒。

IE9 怎么能跑得这么快，而所有其他浏览器都陷入泥潭？

我试图找到将元素合并为一个的方法，以便在任何给定时间都有一个 setTimeout，但不幸的是它无法承受任何干扰（例如单击不同的链接以开始新的当前动画完成之前的动画）。

编辑：为了详细说明对 cme​​ts 的响应，这里是代码的大纲：

link.onclick = function() {
    clearTimeout(colourFadeTimeout);
    colourFadeTimeout = setTimeout("colourFade(0);",25);

    clearTimeout(arrowScrollTimeout);
    arrowScrollTimeout = setTimeout("arrowScroll(0);",25);

    clearTimeout(pageFadeOutTimeout);
    pageFadeOutTimeout = setTimeout("pageFadeOut(0);",25);

    clearTimeout(pageFadeInTimeout);
    pageFadeInTimeout = setTimeout("pageFadeIn(0);",25);
}

四个函数中的每一个都将淡入淡出一帧，然后设置另一个超时，参数递增，直到动画结束。

您可以在http://adamhaskell.net/cw/index.html 看到页面（用户名：knockknock；密码：goaway）（它有声音和音乐，可以禁用，但要注意！） - 我的 JavaScript 非常混乱，因为我没有真正组织得当，但有一些评论，希望你能看到大致的想法。

Answer 1

几件事：

1. 您的超时时间为 25 毫秒。这转换为 40fps，这是一个非常高的帧速率，可以尝试通过 javascript 实现。特别是对于涉及可能触发重排的 DOM 操作的事情。将其增加到 50 或 60。对于您正在制作的动画类型，15fps 应该足够流畅。您不是要在此处显示视频，只是在页面上移动内容。

2. 不要使用字符串作为setTimeout() 的第一个参数。特别是如果您关心性能。这将强制 javascript 重新编译每个动画帧的字符串。改用函数。如果您需要传递参数，请使用匿名函数来包装您要执行的函数：

   setTimeout(function(){
       pageFadeIn(0)
   },50);
   

   这只会在脚本加载时编译一次。

3. 正如 Ben 所提到的，使用单个 setTimeout 来调度函数会更便宜。就此而言，改用 setInterval 可能会提高代码清晰度（也可能不会，这取决于您的编码风格）。

---

补充答案：

对 javascript 动画进行编程是关于优化和妥协的。可以在页面上为很多东西制作动画而不会放慢速度，但是您需要知道如何正确地做，并决定要牺牲什么。我几年前写的一个演示实时战略游戏就是一个例子，说明一次可以制作多少动画。

我为优化游戏所做的事情包括：

1. 行走的士兵仅由两帧动画组成，我只是在两幅图像之间切换。但是效果还是非常有说服力的。您不需要完美的动画，只要看起来令人信服即可。

2. 我对所有内容都使用一个 setInterval。它在 CPU 方面更便宜且更易于管理。只需确定基本帧速率，然后安排不同动画在不同时间开始。

Answer 2

嗯，这是很多 javascript（尽管“令人敬畏的四倍剂量”:)

你触发了很多 setTimeout 序列，我不确定 JS 引擎对此进行了怎样的优化.. 尤其是 IE

好吧，也许只是一个粗略的建议……你也许可以写一个小型计时引擎。

维护一个全局对象，用于存储当前运行的定时事件以及要运行的函数，以及延迟...

然后有一个单独的 setTimeout 处理程序来检查该全局对象，并减少每次迭代的延迟并在延迟变为 时调用该函数

你的全局事件看起来像这样：

var events = {

        fade1 : {
            fn : func_name,
            delay : 25,
            params : {}
        }

        fadeArrow : {
            fn : func_name,
            delay : 500,
            params : {}
        }

        slideArrow : {
            fn : func_name,
            delay : 500,
            params : {
                arrow:some_value
            }
        }

    }

然后创建一个函数以间隔（可能是 10 或 20 毫秒）循环遍历这些函数，并减少延迟，直到它们完成并使用 params 作为函数的参数触发函数（检查 Function.call ）。

一旦关闭，以相同的延迟再次触发 setTimeout..

要取消事件，只需从事件列表中取消设置属性..

构建一些方法来添加/删除队列事件，更新参数等等..

这会将所有内容减少到只有一个超时处理程序..

（只是一个想法）