span的文本不会立即被Javascript更改

Question

I have a span and a button. When I press the button I want to change the span and call a function (getting a private key with keythereum , but I don't think it matters what function I use), which takes a pretty long time to finish (usually 5-10 seconds).

window.myFunction = function() {

// checking the text of the span
    console.log(document.getElementById("span").textContent);

//changing my span
    document.getElementById("span").textContent = "Please wait..."

// console outputs the new span showing that the textContent has changed
    console.log(document.getElementById("span").textContent);

// getting the password from an input field
    var password = document.getElementById("password").value;

// calling the function to get a private Key from an object, 
// locked with the password I just got from the input field
    try {
        var privateKey = keythereum.recover(password, keyObj);
        console.log(privateKey.toString('hex')); 
    } catch (error) {
        console.log(error);
    }
}

When I press the button I want the span to change to something like "please wait..." and then to call the function. But what happens when I press the button is that I get the first console log with the old textContent of the span, next I get the new console log with the new textContent but I cannot see the change on the screen. Next nothing happens while the keythereum function gets called. The span only visually changes when the function completes it's task and the privateKey gets logged. Is there a way to immediately visually change the span before the function gets called?

Answer 1

keythereum.recover apparently does synchronous blocking (eg, uses alert or prompt or confirm ). This prevents the change from being painted.

To give the browser a chance to paint the change, schedule the code after the text change for the next task in the task queue via setTimeout :

window.myFunction = function() {

// checking the text of the span
    console.log(document.getElementById("wallet-warning").textContent);

//changing my span
    document.getElementById("span").textContent = "Please wait..."

//***do the rest after the browser has a chance to repain
    setTimeout(function()) {
// console outputs the new span showing that the textContent has changed
        console.log(document.getElementById("wallet-warning").textContent);

// getting the password from an input field
        var password = document.getElementById("password").value;

// calling the function to get a private Key from an object, 
// locked with the password I just got from the input field
        try {
            var privateKey = keythereum.recover(password, keyObj);
            console.log(privateKey.toString('hex')); 
        } catch (error) {
            console.log(error);
        }
    }, 50); // 50ms
}

50ms is virtually unnoticeable to humans, but is a long time to the browser. (I used to use 0 , which schedules it to run as soon as possible once the current task [and its microtasks] complete, but Firefox doesn't always repaint in that case.)

Answer 2

Make the call to keythereum.recover() asynchronous using something like setTimeout(). The text of the span doesn't update because the browser isn't updating the DOM until your JavaScript finishes.