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 が翻訳関数を呼び出すことです。この関数は、Google Translate APIを使用して特定のフレーズを特定の言語に翻訳する Python スクリプトを呼び出します。

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