0

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

Nathan Campos
  • 28,769
  • 59
  • 194
  • 300
Zsolt
  • 423
  • 1
  • 4
  • 4

1 Answers1

0

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;
}
Andy West
  • 12,302
  • 4
  • 34
  • 52
  • Thanks, it works (so far, I have to test it yet on the productive widget), I just had to use document.getElementById("button").object.textElement.innerText = labelText; instead of document.getElementById("button").object.textElement.color = labelText; The .color was a typo from my side, sorry. – Zsolt Nov 30 '09 at 12:35
  • Yes, it does work, tested now. Sad that I do not understand exactly why does it work, but I guess this will come by time. Thanks again Zsolt – Zsolt Nov 30 '09 at 22:21
  • Your original code is blocking the browser and not allowing it to render. All your calls are synchronous. However, setTimeout() is asynchronous, so rendering can be performed while it executes. – Andy West Dec 01 '09 at 04:10