How To Keep Animated Gif Running While Doing Intense Calculations

I have a page which does some intense and long lasting calculations in Javascript. I would like to have a loading animation to tell the user progress is being made. I have an anima

Solution 1:

You can also use HTML5 webworkers (Wikipedia) to run long running scripts in the background. It is just like multi threading for javascript.

It will work in latest browsers except IE.

Found a game using webworkers check it out

Solution 2:

You could split the work in little small pieces and use a setTimeout to to begin the next iteration, once the first has finished, that way the browser has a chance to update the user interface. (this is because the browser uses one single thread, so if it is busy doing js it can't do other things)

Solution 3:

Javascript processing is single threaded, so while your code is running, no other animation code will run.

You'll need to set up your processing to run in batches. I don't know what you are processing, but if you are doing something that can be divided up easily, then you can process the first N items, then use setTimeout to schedule the next chunk to run in a few milliseconds. That way, you give the browser time to do other stuff that needs to be done.

Solution 4:

You probably don't need it anymore, but just in case anyone else is googling it, here's another simple solution:

*note that it would only work if this huge script execution is being caused by a long iteration loop

-make your loop something like this:

functionAsyncLoop(i, lastLoop, parameters) {
        setTimeout(function () {
            if (i < lastLoop) {
                //whatever you wanna do herewindow.console.log('iteration ' + i + ': ' + parameters[i].whatevs);

                i++;
                AsyncLoop(i, lastLoop, parameters);
            }
        }, 0);
    }

-then call it like:

AsyncLoop(0, incredblyLongObjectArray.length, incredblyLongObjectArray);

Here's a little fiddle without using parameters (so it's easier to understand) and with a function to detect if the desirable script has finished executing:

https://jsfiddle.net/or1mrmer/

Solution 5:

If browser freezes, that means you are doing some serious work.

The only way to solve this is to add 100ms of sleep every second of the script execution. Please look at javascript setInterval() call.