DOM在长功能期间不更新[重复]答案

【问题标题】：DOM not updating during long function [duplicate]DOM在长功能期间不更新[重复]
【发布时间】：2019-06-19 15:36:35
【问题描述】：

我有一个电子应用程序，单击按钮运行挖掘功能，需要很长时间才能运行。我试图显示随机数，因为它作为页面上的一个元素而变化。但是，当我运行该函数时，页面会冻结，只有在函数完成后才会更改。

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

【问题讨论】：

标签： javascript html dom electron blockchain

【解决方案1】：

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

有两种解决方案：

让另一个线程完成繁重的工作并定期将更新发布到主线程。在浏览器中，您可以使用web worker 来执行此操作。显然，您也可以使用 Electron 使用网络工作者，请参阅 this example。或者也许你可以让你的主进程而不是你的渲染进程来完成工作。
分解逻辑，以便您定期返回给浏览器，以便它有机会更新其显示。

#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>

【讨论】：