如何在密集的计算任务之前强制在ElectronJS中绘制UI？

Question

我正在构建一个 Electron 程序，通过精确的质量测定来识别分子离子。 计算可能需要几秒钟甚至几分钟。 为了让用户知道它正在处理，我想在激烈的计算开始之前将开始计算的按钮上的文本更改为“正在处理...”。 但我尝试的所有结果都会在计算完成后显示更改！

原则上我认为这是可行的，因为类似的代码可以在解析原子质量数据库之前读取它。

function fnFindSCM(){

  async function showProcessing() {
    document.getElementById("btnFindSCM").innerHTML = "Processing...";   
  }

  async function awaitShowProcessing(){
    await showProcessing();

  }

  awaitShowProcessing();

  reallyFindSCM();

}

函数

fnFindSCM()

 是按钮的 

click

 事件监听器，而 

reallyFindSCM()

 是执行繁重计算的函数。

我希望这个问题的解决方案也能解决我的下一个问题——显示找到的“命中”，而不是在搜索完成时立即显示所有内容。

Answer 1

您的异步函数

showProcessing()

需要返回一个Promise，以便计时按照您的预期工作。以下是我如何重组您提供的代码：

function fnFindSCM() {
    async function showProcessing() {
        return new Promise(resolve => {
            document.getElementById("btnFindSCM").innerHTML = "Processing...";
            resolve();
        });
    }

    showProcessing()
        .then(() => reallyFindSCM())
        .catch(error => console.log(error));
}