Question

I’m processing a large amount of data with JavaScript. I put a circular gif and a progress div to show how much progress has been done in creating the model. However, when it gets to the bulky part of code processing, the loading gif stops spinning and the percentage updating stops working. (until the very end for a split second)

This is the block of code that freezes the gif.

    // convert binary normals to ascii
    for(i=0;i<norms.length;i++){   //<-- the array length is about 200,000, and could be larger
        normals.push(toAscii(norms[i], mins[5], maxes[5]));  //nx
        normals.push(toAscii(norms[i+1], mins[6], maxes[6]));//ny
        normals.push(toAscii(norms[i+2], mins[7], maxes[7]));//nz
        i = i+2; //skip next 2 as they're already converted

        percentComplete = (normals.length/norms.length)*100;
        percentComplete = Math.round(percentComplete);

        document.getElementById('loadingScrn').innerHTML = "Processing " 
        +percentComplete + "%" + " Complete"; //<-- The loading gif is right below this element on the webpage and neither update while this function is running  
    } 

How can I get the browser update the display while JavaScript functions process large data? Is there a way to thread activities so that both updating the Document and JavaScript processing occur simultaneously?

Answer 1

JavaScript runs on the same thread as the browser GUI in most cases (or the tab’s GUI, if each tab is given its own process). You will have to break the work into small pieces and schedule the next piece from the currently-executing one using setTimeout().

For example, this might work in your case:

var i = 0;

function doWork() {
    do {
        // One iteration here...

        i++;
    } while (i % 100 != 0 && i < norms.length);

    // ^^^
    // Break work into pieces of 100 elements each; adjust this
    // number as needed.

    if (i < norms.length) {
        setTimeout(doWork, 1);
    }
}

setTimeout(doWork, 1);

See this example jsfiddle.