0

我目前正在开发一个 Electron 应用程序来练习一个人的词汇量。本质上，我有一些以一种语言保存的句子，如果用户按下按钮，随机选择的句子会被翻译成另一种语言，然后用户必须将其翻译成另一种语言。

有时，翻译需要几秒钟，在此期间，我想显示一个加载动画 - 我这里基本上复制了#5的代码（基本上只是在下面的函数中添加的HTML元素加上CSS）。

function handleNextPhraseButtonClicked() {
    const loadElem = document.createElement("div");
    loadElem.className = "loading";
    loadElem.innerHTML = "Loading…"
    document.body.appendChild(loadElem);

    doTranslationStuffAndSetHTML();

    document.body.removeChild(loadElem);
}

现在，我的问题是：加载动画没有显示（即使在长时间等待期间），这似乎是因为代码执行有点异步。动画本身可以正常工作，因为如果我不在函数结束时将其删除，它就会显示出来，但如果我不这样做，它甚至永远不会出现，即使翻译内容需要几秒钟。执行顺序应该是document.body.appendChild(loadElem); -> doTranslationStuffAndSetHTML(); -> document.body.removeChild(loadElem);，但似乎是document.body.appendChild(loadElem); -> document.body.removeChild(loadElem); -> doTranslationStuffAndSetHTML();，或类似的东西。我知道翻译需要几秒钟，因为整个页面在这段时间内冻结，直到显示翻译的句子（所有这些都发生在doTranslationStuffAndSetHTML()）。我也尝试过使用 Promises，但无济于事。有人可以帮我吗？有没有办法检查页面是否已更新，以及是否已将新元素添加到其 HTML 代码中（例如，不仅添加了，而且已经显示）？是 Electron 的问题，还是编译器在尝试优化代码执行时出错？

doTranslationStuffAndSetHTML 的实际代码如下：

function doTranslationStuffAndSetHTML () {
    currentID = vocabHandler.getRandomPhraseID();
    document.getElementById("phraseHeader").innerText = vocabHandler.getPhrase(currentID, languageToTranslateCode);
    vocabHandler.incrementShownCount(currentID);
    document.getElementsByClassName("answerInput")[0].disabled = false;
    if(document.getElementsByClassName("footer").length > 0) document.body.removeChild(document.getElementsByClassName("footer")[0]);
}

尽管这里唯一相关的一点可能是 vocabHandler.getPhrase 调用了一个翻译函数，该函数调用了一个 Python 脚本，该脚本使用Google Translate API将给定的短语翻译成指定的语言。

function translate(srcLanguageCode, destLanguageCode, text) {
    const { spawnSync } = require("child_process");
    const childPython = spawnSync("python", ["src/translate.py", srcLanguageCode, destLanguageCode, text]);
    var data = childPython.stdout.toString().substring(1,);
    return eval(convertString(data));
}
4

1 回答 1

0

所以，为我解决所有问题的只是将函数（包括删除加载动画！）包装到 setTimeout 中......

function handleNextPhraseButtonClicked() {
    const loadElem = document.createElement("div");
    loadElem.className = "loading";
    loadElem.innerHTML = "Loading…"
    document.body.appendChild(loadElem);

    setTimeout(() => {
        doTranslationStuffAndSetHTML();
        document.body.removeChild(loadElem);
    }, 0);
}

我尝试过更多地摆弄 Promise，但无论我尝试什么，似乎 await 对代码执行都没有任何影响。

于 2021-08-17T17:33:37.070 回答