DOM refresh on long running function

Question

I have a button which runs a long running function when it\'s clicked. Now, while the function is running, I want to change the button text, but I\'m having problems in some

Answer 1

If you don't want to use setTimeout then you are left with WebWorker - this will require HTML5 enabled browsers however.

This is one way you can use them -

Define your HTML and an inline script (you don't have to use inline script, you can just as well give an url to an existing separate JS file):

Preparing worker...

For the inline script we mark it with type javascript/worker.

In the regular Javascript file -

The function that converts the inline script to a Blob-url that can be passed to a WebWorker. Note that this might note work in IE and you will have to use a regular file:

function getInlineJS() {
    var js = document.querySelector('[type="javascript/worker"]').textContent;
    var blob = new Blob([js], {
        "type": "text\/plain"
    });
    return URL.createObjectURL(blob);
}

Setup worker:

var ww = new Worker(getInlineJS());

Receive messages (or commands) from the WebWorker:

ww.onmessage = function (e) {
    var msg = e.data;

    document.getElementById('status').innerHTML = msg;

    if (msg === 'Done!') {
        alert('Next');    
    }
};

We kick off with a button-click in this demo:

document.getElementById('start').addEventListener('click', start, false);

function start() {
    ww.postMessage('start');
}

Working example here:
http://jsfiddle.net/AbdiasSoftware/Ls4XJ/

As you can see the user-interface is updated (with progress in this example) even if we're using a busy-loop on the worker. This was tested with an Atom based (slow) computer.

If you don't want or can't use WebWorker you have to use setTimeout.

This is because this is the only way (beside from setInterval) that allow you to queue up an event. As you noticed you will need to give it a few milliseconds as this will give the UI engine "room to breeth" so-to-speak. As JS is single-threaded you cannot queue up events other ways (requestAnimationFrame will not work well in this context).

Hope this helps.