在 DOM 就绪事件上加载大量脚本片段的模式，而 IE 8 不会弹出脚本超时警告

Question

我正在开发一个包含大量 JavaScript 的界面 - 所有小型的、独立的代码片段，旨在在界面上执行各种操作。

所有片段（或功能块，如果您愿意的话）都放置在同一范围内； DOM 就绪事件。这样各个片段就能够共享一些作用域全局变量。

它的结构如下...

$(function ()
{
    var SCOPED_GLOBAL_1;
    var SCOPED_GLOBAL_2;
    // Etc.


    // A snippet of code designed to enable X functionality

    // Another snippet of code designed to enable Y functionality

    // Etc.
});

使用这种方法，我会收到可怕的脚本超时弹出窗口，因为正在执行大量代码。

Internet Explorer 8 确定脚本超时的 基于拨打的电话数量...并且正在拨打很多电话...很多！

我已经做了一些测试，据我所知，避免弹出的唯一方法是使用 setTimeout，并逐渐执行代码块。

我尝试将代码拆分为对 DOM 就绪事件的多次调用，但 Internet Explorer 8 似乎将这些调用解释为一次调用。 （分析时的签名相同）。

如果我需要实现 setTimeout 方法，代码会变得混乱。共享作用域全局变量并不容易。

你们有模式可以帮助我吗？

更新

正如你们中的一些人所建议的，优化代码将是解决此问题的一种方法。我确信代码中有优化的空间，但据我所知；这里的问题只是大部分代码，而不是它的执行方式。

有许多预先设置的代码正在运行，这些代码初始化各种 UI 组件。正是这段代码在 Internet Explorer 8 中导致了问题...... 是由于调用的数量过多。而不是代码执行所需的时间。

该代码在所有其他浏览器中运行得又快又好，加载平均需要一秒半的时间（与正在发生的事情相比，这很快）。这里的问题是，Internet Explorer 8 根据执行的调用次数将脚本定义为缓慢，而所有其他浏览器（似乎还有 IE 9）根据执行代码所需的时间来定义超时。

Answer 1

如果没有重构，setTimeout 可能是本书中最简单的技巧。它也不必很混乱：

$(function () {
    var SCOPED_GLOBAL_1, SCOPED_GLOBAL_2;

    // Add code in blocks
    var codeBlocks = [];
    codeBlocks.push(function () {
        // A snippet of code
    });
    codeBlocks.push(function () {
        // Another snippet of code
    });

    // Execute code in blocks
    while (codeBlocks.length) {
        (function (func) {
            setTimeout(func, 0);
        })(codeBlocks.shift());
    }
});

这实际上创建了一个包含任意数量要执行的代码块的队列，并使用 setTimeout() 按顺序单独执行它们。