Dashboard: providing user feedback by changing button label

Question

What I want is to provide user feedback about operation status through button label. Initially the button says "save", once clicked I want to change the label to "saving..." enter another function and once the function returns change the label to "saved" then pause 2 seconds and set the label again to initial "save" value.

Here is the code:

function myClickHandler(event)
{   
    document.getElementById("button").object.textElement.color = "saving...";
    functionx ()
    document.getElementById("button").object.textElement.color = "saved";
    sleep (5000);
    document.getElementById("button").object.textElement.color = "save";
}

The problem is that for some reason only the last document.getElementById("button").object.textElement.color = "save"; is actually visible on canvas because the canvas or button are rendered only once I exit from myClickHandler function. Any hint?
Thanks in advance

Answer 1

Something like this might work better. I'm pretty sure setTimeout is non-blocking.

function myClickHandler(event) {
    updateLabel("saving...");
    setTimeout("performFunctionX()", 250);
}

function performFunctionX() {
    functionx;()
    updateLabel("saved");
    setTimeout("updateLabel('save')", 5000);
}

function updateLabel(labelText) {
    document.getElementById("button").object.textElement.color = labelText;
}