Javascript function gets ignored in loop

Question

I am building the frontend of a django app with javascript. The script contains this function:

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){};
        }

It allows the user to record an audio of a word he sais. This audio gets then turned into a string, which then appears on the html page as the element 'result'. This function(startConverting()) gets called in the following function(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);
      
        }
    }
}

The askLoop() function contains a loop in which the startConverting() function gets called. But the problem is that the loop doesn't wait for that function(startConverting()) to finish. So the loop contiues while the startConverting() is still working. Any ideas how to fix this so that the loop waits for startConverting() to finsh?

transcript.replace("\n","<br>") you need to assign this value. It does't mutate the value of transcript. — Jeremy J Starcher
– Jeremy J Starcher, Commented Feb 1, 2021 at 15:25
Ok thank you but startConverting() actually worked perfectly when I tested it separately also without assigning — anonimostilton
– anonimostilton, Commented Feb 1, 2021 at 15:29

Jeremy Thille · Accepted Answer · 2021-02-01 15:57:56Z

spr.onresult is asynchronous (this function will only be executed on result, as the name says), so startConverting() is asynchronous. So, getElementById("result").textContent happens way before it has any text content, so it's empty. You absolutely need to await startConverting(), which needs to return a 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);
    }
}

Collectives™ on Stack Overflow

Javascript function gets ignored in loop

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related