2

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 going 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.

cllpse
  • 21,396
  • 37
  • 131
  • 170
  • What is the question here? What kind of answer do you expect? A universal refactoring pattern? I'm afraid there is none. The approach using `setTimeout` is probably the last thing to consider. Before that, refactore/optimize your code. – jAndy Apr 19 '11 at 14:28
  • I'm not sure, but wrapping your code in an anonymous function shouldn't have much to do with whether the script time-out is triggered. It's more likely your code is not very optimal. Consider profiling (timing) your code and try to optimize the slow parts. – RoToRa Apr 19 '11 at 14:44
  • Ok, ignoring optimization for now (although it's still probably a good thing to do), have you looked at http://stackoverflow.com/questions/210821/how-can-i-give-control-back-briefly-to-the-browser-during-intensive-javascript – RoToRa Apr 20 '11 at 08:22

1 Answers1

0

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().

David Tang
  • 92,262
  • 30
  • 167
  • 149