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 不会更新。有两种解决方案：让另一个线程完成繁重的工作并定期向主线程发布更新。在浏览器中，您可以使用web worker 执行此操作。显然，您也可以使用 Electron 使用网络工作者，请参阅此示例。或者，也许您可以通过主进程而不是渲染进程来完成工作。分解逻辑，以便您定期返回给浏览器，以便它有机会更新其显示。#1 可能是你正在做的那种数字运算的更好选择。这是一个从 1 到 1,000,000,000 计数的示例，每 10,000 次更新一次：// Get the contents of our worker script as a blobvar workerScript = document.getElementById("worker").textContent;var blob = new Blob(&nbsp; &nbsp; [workerScript],&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; type: "text/javascript"&nbsp; &nbsp; });// Create an object URL for itvar url = (window.webkitURL || window.URL).createObjectURL(blob);// Start the workervar worker = new Worker(url);worker.addEventListener("message", function(e) {&nbsp; &nbsp; if (e && e.data && e.data.type === "update") {&nbsp; &nbsp; &nbsp; &nbsp; display.textContent = "Value: " + e.data.value;&nbsp; &nbsp; }});<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) {&nbsp; &nbsp; if (n % 10000 === 0) {&nbsp; &nbsp; &nbsp; self.postMessage({type: "update", value: n});&nbsp; &nbsp; }}</script><div id="display">Waiting for worker to start...</div>