Showing a GIF image while javascript processing is stuck

I am building an application in which i am doing some lengthy(10-15 seconds) of java-script execution. I want to show a gif image while this execution is on. I have added a gif loading image and before i start processing my javascript, i set the style of div containing gif image to display:block and after javascript processing is done, i set it back to display:none. I can see the gif image apprearing but it is not showing the animation. it is stuck. this gif is a loading icon.

my javascript function looks somethng like this

function开发者_如何学Python jsFunc(){
// set the div containg the image to display:block
elmDivGif.style.display="block";

Here comes my operation which will take 10-15 secons to finish

// setting the image style to none
elmDivGif.style.display="none";
}

Is there anything wrong in this approach. I have a feel that both gif animation and js are using the same thread to run and it is only available to one at a time.

Please advice.

Gif will not show the animation because the browser rendering process is actually in the same thread the javascript code is running on. In order to achieve what you're trying to do, you must use Web Workers, but keep in mind that it's not supported by all browsers yet.

If you want to run javascript and an animated gif at the same time you must have breaks in your javascript code. This can be achieved by splitting it into multiple functions and calling each function using setTimeout with a delay of about 10 milliseconds.

I was successful at displaying my gif animation during javascript processing using setTimeout to break it up and process in small enough bursts to not bog down the display, it allows other click events, etc. You didn't mention what your process is doing so I'm presuming you can break at least some of it down into sub-millisecond groups.

Between setTimeout calls, 10,000 iterations of my for loop turned out to be a sweet spot with a 10ms delay. The total time experienced as a user ends up feeling shorter since they can still interact with the page and they are more patient since they can observe an animation connoting that work is being done. This seems much more preferable than a stuck page that gets the action accomplished 'as fast as possible'.

The number of iterations between setTimeout calls for your project is going to be dependent upon how long each iteration takes. Experiment with however many iterations works well for you and bear in mind that slower computers may have a different experience if you try to max out the number of iterations.

Here is the pseudo code that made my application interact more smoothly:

masterArray = populateMasterArray();
processInteractively(0, masterArray, ...);
function processInteractively(i, masterList, ...) {
    if (masterList.length > i) {
        for (var x=0; x < 10000 && masterList.length > (i+x); x++) {
            var tempI = i + x;
            //...process this tempI iteration
        }
        i += x; // Lastly update i with however many iterations were processed

        // Wait 10 milliseconds to continue processing; allowing the 
        // browser time to compose itself and display a gif animation
        setTimeout(function() {
            processInteractively(i, masterList, ...);
        }, 10); 
    else {
        outputResults(...variablesBuiltDuringExecution);
    }
}

One thing I noticed was that even though the animation may look 'stuck' if your loop counter is "too high", it is still animating according to its own timeline and will jump to the appropriate appearance whenever animation can be resumed. Therefore it may be aesthetically acceptable to have some slight (or barely imperceptible) pause in the animation which could convey that work is being done.