spin.js stops spinning during long running thread on IE and FF

Question

My code:

$(document).ready(function () {
    $("#divContent").hide();
    $("#divProcessing").spin();

    $("#divProcessing").show();

    setTimeout(function () {
        Longrunningfunction1
        Longrunningfunction2
        Longrunningfunctionn

        //All done
        $("#divProcessing").hide();
        $("#divContent").show();
        $("#divContent").style = "margin-top:60px;height:100%;display:''";

        $("#tabbed-nav").data('zozoTabs').refresh();
    }, 0);
});

Using SetTimeout as above, I managed to get the Processing div to behave properly ie show then hide and show the Content div when everything is completed. The issue is that in IE and FF, the spinner stops spinning after some time. In Chrome it works perfectly and the spinner keeps going.

I have tried:

• forcing a redraw of the Processing div
• using different js spinners (worse behaviour than spin.js - they never appear)
• using css3 animations instead of spin.js (never animates)
• additional settimeouts
• setintervals to attempt to get the ui to redraw.

Nothing has worked thus far. Short of moving my long running processess to a new view, is there anything else I can do? I know these issues are to do with js being single threaded, but since chrome is ok I thought there might be a solution. Thanks.

Answer 1

First my usual note: JavaScript isn't single-threaded. It's just that on browsers, there's only one main UI JavaScript thread. But JavaScript, the language, is near-silent on the concept of threading and can (and has) been implemented in multi-threaded ways in other environments.

Some browsers use that same UI thread for non-JavaScript tasks as well, it would appear that spin.js is either relying on JavaScript (since it talks about keyframe stuff) or is otherwise impacted by the main UI thread being busy.

The solution is to move long-running functions off the main UI thread into a web worker if possible. This is good for a number of reasons, not least that your UI remains responsive while the worker is doing its work.

Web workers are well supported in modern browsers, but not in IE8 or IE9 and Android browsers before v4.4.4.