开发者

Pattern for loading a lot of script snippets on DOM ready-event, without IE 8 popping up a script time-out warning

I'm working on an interface with a lot of JavaScript - all small, self-contained snippets of code, designed to do various things on the interface.

All of the snippets (or blocks of functionality, if you will) are placed inside the same scope; the DOM ready event. This is so that the various snippets are able to share a few scoped global variables.

Here's how it's structured...

$(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.
});

Using this approach, I get the dreaded script time-out pop-up, because of the large amount of code being executed.

Internet Explorer 8 determines script time-out's based on how many calls are made... And a lot of calls are being made... A lot!

I've done some testing, and as far as I can tell, the only way to avoid the pop-up is to use setTimeout, and gradually execute chunks of the code.

I've tried splitting up the code into multiple calls to the DOM ready event, but it seems that Internet Explorer 8 interprets those calls as if they were one call. (Same signature when profiling).

The code is gonna get messy if I need to implement the setTimeout approach. And sharing scoped globals won't be easy.

Have you guys got a pattern to help me out?

Update

As some of you have suggested, optimizing the code would be a way to handle this. I am sure that there is room for optimizations in the code, but as I see it; it is simply the bulk of code that's the issue here and not how it performs.

There are a lot of pre- set-up code being run, which initializes various UI components. It is this code that is causing problems in Internet Explorer 8... by the sheer number of calls being made. Not how long it takes for the code to execute.

The code runs fast and fine in all other browsers, taking on average a second and a half to load (which is fast, compared to how much stuff is goin开发者_开发知识库g on). The problem here is that Internet Explorer 8 defines a script as being slow, by the number of calls being done, whilst all other browsers (and IE 9, seemingly) defines time-out's by the time it takes the code to execute.


Short of refactoring, setTimeout is probably the simplest trick in the book. It doesn't have to be messy either:

$(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());
    }
});

This essentially creates a queue of any number of blocks of code to execute, and executes them individually, in order, with setTimeout().

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜