How to keep animated gif running while doing inten

问题:

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 animated gif now, but the whole browser window freezes (and the gif does not play) while the Javascript is running. Then when it's done, it unfreezes. The calculations must be client-side so they cannot be done on a server.

Is there a way to keep Javascript from freezing the page and stopping animations from playing while it's doing calculations?

回答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

回答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)

回答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.

回答4:

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.

回答5:

CSS3 animations typically continue running even if JavaScript is blocking (tested with Chrome 40.0).

So you can use libraries like SpinKit or spin.js to visualize that the calculation is ongoing.

However, note the availability of CSS3 animations:
caniuse.com
Dispelling the Android CSS animation myths

回答6:

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:

function AsyncLoop(i, lastLoop, parameters) {
        setTimeout(function () {
            if (i < lastLoop) {
                //whatever you wanna do here
                window.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/

回答7:

I answered this with a functioning example (with simple progress indicator) here.

It uses "yield" and is extremely simple to use (and modify existing JS loops) when you simply want to allow other processes a timeslice, and it is simpler to set up than web workers (which I have used as well), especially if you already have a loop interacting with global variables.