Javascript function gets ignored in loop

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?

132 thoughts on “Javascript function gets ignored in loop”

Leave a Comment