Javascript函数在循环中被忽略答案

【问题标题】：Javascript function gets ignored in loopJavascript函数在循环中被忽略
【发布时间】：2021-02-01 15:22:32
【问题描述】：

我正在使用 javascript 构建 django 应用程序的前端。该脚本包含此函数：

function startConverting()
        {   
            var r=document.getElementById('result');
            var spr=new webkitSpeechRecognition(); //Initialisation of web Kit
            spr.continuous=false; //True if continous conversion is needed, false to stop transalation when paused 
            spr.interimResults=true;
            spr.lang='en-IN'; // Set Input language
            spr.start(); //Start Recording the voice 
            var ftr='';
            spr.onresult=function(event){
                var interimTranscripts='';
                for(var i=event.resultIndex;i<event.results.length;i++)
                {
                    var transcript=event.results[i][0].transcript;
                    transcript.replace("\n","<br>")
                    if(event.results[i].isFinal){
                        ftr+=transcript;
                    }
                    else
                    interimTranscripts+=transcript;
                }
                r.innerHTML=ftr +interimTranscripts ;
            };
            spr.onerror=function(event){};
        }

它允许用户录制他所说的单词的音频。然后该音频会变成一个字符串，然后作为元素“结果”出现在 html 页面上。这个函数(startConverting()) 在下面的函数(askLoop()) 中被调用。

function askLoop() {
    var voclisten = document.getElementById("voclisten").textContent;
    
    var voclistde = document.getElementById("voclistde").textContent;
        for (var i = 0; i < voclistde.length; i++) {
        speakown("was heißt"+ voclistde[i]);
        startConverting();
        var uservoc = document.getElementById("result").textContent;
        var paragraph = document.getElementById("pa");
        if(voclisten[i].includes(uservoc)) {
            var text = document.createTextNode("Correct");
            paragraph.appendChild(text);
       
        }
        else {
            var text = document.createTextNode("Wrong");
            paragraph.appendChild(text);
      
        }
    }
}

askLoop() 函数包含一个循环，其中调用了 startConverting() 函数。但问题是循环不会等待该函数（startConverting（））完成。因此，当 startConverting() 仍在工作时，循环继续。任何想法如何解决这个问题，以便循环等待 startConverting() 完成？

【问题讨论】：

transcript.replace("\n","<br>") 你需要分配这个值。它不会改变成绩单的值。
好的，谢谢，但是当我单独测试它时 startConverting() 实际上工作得很好，也没有分配

标签： javascript loops

【解决方案1】：

spr.onresult 是异步的（这个函数只会在结果上执行，顾名思义），所以startConverting() 是异步的。所以，getElementById("result").textContent 发生在它有任何文本内容之前，所以它是空的。你绝对需要await startConverting()，它需要返回一个Promise。

function startConverting() {
    return new Promise((resolve, reject) => {
        spr.onresult = function (event) {
            // ... do your stuff ...
            resolve(ftr + interimTranscripts); // Resolve with the text value you need
        };
        spr.onerror = reject;
    });
};


async function askLoop() { // <-- Add async so you can await inside

    var voclisten = document.getElementById("voclisten").textContent;
    var voclistde = document.getElementById("voclistde").textContent;

    for (var i = 0; i < voclistde.length; i++) {

        speakown("was heißt" + voclistde[i]);

        const uservoc = await startConverting(); // <-- Here. This contains the text value returned by resolve()

        var paragraph = document.getElementById("pa");

        if (voclisten[i].includes(uservoc)) {
            var text = document.createTextNode("Correct");
        } else {
            var text = document.createTextNode("Wrong");
        }
        paragraph.appendChild(text);
    }
}

【讨论】：