Question

I’ve got a long running method — and I want to indicate to the user that an operation is underway. This is NOT and ajax call, so I can’t use the common pattern I’ve used in the past to display, say a spinner, before the ajax event, then hiding it on success for example.

In my case — I’m not making an ajax call, I’m instead doing some very heavy DOM manipulation.

I had a test example on jsFiddle.net — would love to learn how to capture the event. At the moment, my “wait-message” div updates at the same exact time when my operation completes which is much too late 🙁

Complete sample code is here: http://jsfiddle.net/rsturim/97hrs/6/

Javascript (jQuery)

$(document).ready(function() {

    $("#link-action").click(function(e) {

        $("#wait-message").text("starting ...");

        var count = longRunningMethod(1000000000);

        $("#result").text(count);
        $("#wait-message").text("completed.");

    });


    var longRunningMethod = function(countUpTo) {
        var i = 0;
        while (i <= countUpTo) {

            i++;
        }

        return i;

    };
});

HTML:

<div id="wait-message">
    push button please 
</div>   
<hr />

<button id="link-action">Run Operation</button>

<hr />

<h1>Results:</h1>
<div id="result"> </div>   

Answer 1

Here is a solution. I’m not sure if it works in all browsers, you may want to test it out in several, but I think it does:

$(document).ready(function() {

    $("#link-action").click(function(e) {

        $("#wait-message").text("starting ...");

        // Stuff to do after a render
        setTimeout(function(){
            var count = longRunningMethod(1000000000);

            $("#result").text(count);
            $("#wait-message").text("completed.");
        }, 0);
    });


    var longRunningMethod = function(countUpTo) {
        var i = 0;
        while (i <= countUpTo) {

            i++;
        }

        return i;

    };
});

Basically, the browser won’t render any changes until a script finishes executing. That allows you to do things like:

• Hide all divs with a certain class
• Show one of those divs

In a row and the browser will never render the div that is being shown as hidden, so you won’t get weird flickers or things moving around on the page.

Using setTimeout like I did, the anonymous click handler will finish executing, the browser will re-render, the the anonymous function in the setTimeout will run (immediately after the render since there is no actual delay).