DOM 在长函数期间不更新

Question

我有一个电子应用程序，单击按钮运行挖掘功能，需要很长时间才能运行。我试图在随机数更改为页面上的元素时显示它。但是，当我运行该函数时，页面会冻结并且仅在该函数完成时才会更改。//Mining function   function mine(index, time, prev, transactions, difficulty) {        if (index !== 0) {            this.log(`Mining Block ${index}`);        }        const startTime = Date.now();        let nonce = 0;        let hash = '';        while (hash.substring(0, difficulty) !== Array(difficulty + 1).join('0')) {            nonce++;            hash = crypto                .createHash('sha256')                .update(                    index.toString() +                    time.toString() +                    prev.toString() +                    transactions.toString() +                    nonce.toString()                )                .digest('hex')                .toString();            //Nonce indicator            $("#nonce").text(`Nonce: ${nonce}`);        }        const performanceTime = Date.now() - startTime;        if (performanceTime <= 60000 && index !== 0) {            this.difficulty++;            this.log(`Difficulty Increased. Difficulty Is Now ${this.difficulty}`);        }        const seconds = performanceTime / 1000;        const performance = Math.floor((10 * nonce) / seconds) / 10000;        if (index !== 0) {            if (performance !== Infinity && performance >= 25) {                this.log(`Performance: ${performance} kh/s`);                $("#performance").text(`Performance: ${performance} kh/s`);            } else {                this.log(`Performance Could Not Be Measured`);                $("#performance").text(`Performance: Error`);            }            this.log(`Block ${index} Successfully Mined`);        }        return nonce;    }        //Call         function mineHandler(){mine(props)}        $("#miningBtn").click(mineHandler);

Answer 1

这就是浏览器的工作方式。（并且 Electron 的显示器实际上是一个浏览器。）有一个线程负责更新 UI 和运行客户端 JavaScript 代码。（在 Electron 中，它是“渲染线程”。）因此，当您的 JavaScript 代码正在运行时，UI 不会更新。

有两种解决方案：

1. 让另一个线程完成繁重的工作并定期向主线程发布更新。在浏览器中，您可以使用web worker 执行此操作。显然，您也可以使用 Electron 使用网络工作者，请参阅此示例。或者，也许您可以通过主进程而不是渲染进程来完成工作。

2. 分解逻辑，以便您定期返回给浏览器，以便它有机会更新其显示。

#1 可能是你正在做的那种数字运算的更好选择。这是一个从 1 到 1,000,000,000 计数的示例，每 10,000 次更新一次：

// Get the contents of our worker script as a blob

var workerScript = document.getElementById("worker").textContent;

var blob = new Blob(

    [workerScript],

    {

        type: "text/javascript"

    }

);

// Create an object URL for it

var url = (window.webkitURL || window.URL).createObjectURL(blob);

// Start the worker

var worker = new Worker(url);

worker.addEventListener("message", function(e) {

    if (e && e.data && e.data.type === "update") {

        display.textContent = "Value: " + e.data.value;

    }

});

<script id="worker" type="javascript/worker">

// The type on this script element means the browser

// won't run it directly. It's here so we can turn it

// into a blob to run the worker later.

for (var n = 1; n <= 1000000000; ++n) {

    if (n % 10000 === 0) {

      self.postMessage({type: "update", value: n});

    }

}

</script>

<div id="display">Waiting for worker to start...</div>