Question

我有一个跨度和一个按钮。当我按下按钮时，我想更改范围并调用一个函数（使用keythereum获取私钥，但我不认为这对我使用的功能很重要），这需要很长时间才能完成完成（通常5-10秒）。

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);
    }
}

当我按下按钮时，我希望跨度改为＆＃34;请等待......＆＃34;然后调用该函数。但是当我按下按钮时会发生的情况是我得到第一个带有span的旧textContent的控制台日志，接下来我得到了带有新textContent的新控制台日志，但我看不到屏幕上的变化。接下来，在调用keythereum函数时没有任何反应。只有当函数完成任务并且privateKey被记录时，跨度才会在视觉上发生变化。有没有办法在调用函数之前立即直观地改变跨度？

Answer 1

keythereum.recover显然是同步阻止（例如，使用alert或prompt或confirm。这可以防止改变画面。

要让浏览器有机会绘制更改，请在文本更改后通过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
}

对于人类而言，50毫秒几乎不会引起注意，但浏览器需要很长时间。（我曾经使用0，它会在当前任务[及其微任务]完成后安排它尽快运行，但在这种情况下Firefox并不总是重绘。）

Answer 2

使用setTimeout（）等方式调用keythereum.recover()异步。 span的文本不会更新，因为浏览器在JavaScript完成之前不会更新DOM。

跨度文本不会立即使用Javascript进行更改

2 个答案: