Javascript - Function calls not maintaining order

Question

I have following code where I call same function twice with delay of 2 seconds. But all those log prints inside isPermanentDisconnect() are printed at the end of checkStatePermanent after log('After secondflag check') is printed in the console. Can you please guide me as what is wrong with this code.

function customdelay(miliseconds) {
   var currentTime = new Date().getTime();

   while (currentTime + miliseconds >= new Date().getTime()) {
      
   }
}

function checkStatePermanent(iceState) {
    videoReceivedBytetCount = 0;
    audioReceivedByteCount = 0;

    log('before First call')
    let firstFlag = isPermanentDisconnect();
    log('after First call')
    log('Disconnect Flag is: ' + firstFlag)

    customdelay(2000);
    log('after 2 secs')
    let secondFlag = isPermanentDisconnect(); //Call this func again after 2 seconds to check whether data is still coming in.
    log('after second call')
    log('Disconnect Flag is: ' + secondFlag)
    if(secondFlag){ //If permanent disconnect then we hangup i.e no audio/video is fllowing
        log('Disconnect Flag = Permanent')
        if (iceState == 'disconnected'){
            hangUpCall(); //Hangup instead of closevideo() because we want to record call end in db
        }
    }
    log('After secondflag check')
...
}


function isPermanentDisconnect(){
    var isPermanentDisconnectFlag = false;
    var videoIsAlive = false;
    var audioIsAlive = false;
    myPeerConnection.getStats(null).then(stats => {
        stats.forEach(report => {
            log('Report Type: '+report.type+ ' Report Kind :'+ report.kind)
            if(report.type === 'inbound-rtp' && (report.kind === 'audio' || report.kind  === 'video')){ //check for inbound data only
                if(report.kind  === 'audio'){
                    //Here we must compare previous data count with current
                    if(report.bytesReceived > audioReceivedByteCount){
                        // If current count is greater than previous then that means data is flowing to other peer. So this disconnected or failed ICE state is temporary
                        audioIsAlive = true;
                    } else {
                        audioIsAlive = false;
                        
                    }
                    log('Previous Audio count: ' +audioReceivedByteCount + ' Now audio count: ' + report.bytesReceived + ' audio is alive: '+ audioIsAlive)
                    audioReceivedByteCount = report.bytesReceived;
                }
                if(report.kind  === 'video'){
                    if(report.bytesReceived > videoReceivedBytetCount){
                        // If current count is greater than previous then that means data is flowing to other peer. So this disconnected or failed ICE state is temporary
                        videoIsAlive = true;
                    } else{
                        videoIsAlive = false;
                    }
                    log('Previous video count: ' +videoReceivedBytetCount + ' Now video count: ' + report.bytesReceived + ' video is alive: ' + videoIsAlive)
                    videoReceivedBytetCount = report.bytesReceived;
                }
                if(audioIsAlive || videoIsAlive){ //either audio or video is being recieved.
                    log('Either video or audio is alive')
                    isPermanentDisconnectFlag = false; //Disconnected is temp
                } else {
                    isPermanentDisconnectFlag = true;
                }
            }
        })
    });

  return isPermanentDisconnectFlag;
}

your customdelay function is async,, you have to use promises https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise — Mister Jojo, Aug 27 '20 at 12:29
Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Heretic Monkey, Aug 27 '20 at 12:39
@MisterJojo I tried this code as well. `const customdelay = ms => new Promise(res => setTimeout(res, ms));` I got it from SO. — Newbie, Aug 27 '20 at 13:13

score 0 · Answer 1 · answered Aug 27 '20 at 12:30

Try making checkStatePermanent(iceState) an async function and await your calls to isPermanentDisconnect(). This way code execution will be halted untill isPermanentDisconnect() completes

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

score 0 · Answer 2 · answered Aug 27 '20 at 14:04

Managed to get it worked. Posting the answer in case it is useful to others.

Changed the delay function to this

const customdelay = ms => new Promise(res => setTimeout(res, ms));

In the below function notice the async and await

async function isPermanentDisconnect (){
    var isPermanentDisconnectFlag = false;
    var videoIsAlive = false;
    var audioIsAlive = false;

    await myPeerConnection.getStats(null).then(stats => {
        stats.forEach(report => {
            if(report.type === 'inbound-rtp' && (report.kind === 'audio' || report.kind  === 'video')){ //check for inbound data only
                if(report.kind  === 'audio'){
                    //Here we must compare previous data count with current
                    if(report.bytesReceived > audioReceivedByteCount){
                        // If current count is greater than previous then that means data is flowing to other peer. So this disconnected or failed ICE state is temporary
                        audioIsAlive = true;
                    } else {
                        audioIsAlive = false;
                        
                    }
                    log('Previous Audio count: ' +audioReceivedByteCount + ' Now audio count: ' + report.bytesReceived + ' audio is alive: '+ audioIsAlive)
                    audioReceivedByteCount = report.bytesReceived;
                }
                if(report.kind  === 'video'){
                    if(report.bytesReceived > videoReceivedBytetCount){
                        // If current count is greater than previous then that means data is flowing to other peer. So this disconnected or failed ICE state is temporary
                        videoIsAlive = true;
                    } else{
                        videoIsAlive = false;
                    }
                    log('Previous video count: ' +videoReceivedBytetCount + ' Now video count: ' + report.bytesReceived + ' video is alive: ' + videoIsAlive)
                    videoReceivedBytetCount = report.bytesReceived;
                }
                if(audioIsAlive || videoIsAlive){ //either audio or video is being recieved.
                    log('Either video or audio is alive')
                    isPermanentDisconnectFlag = false; //Disconnected is temp
                } else {
                    isPermanentDisconnectFlag = true;
                }

            }
        })
    });

  return isPermanentDisconnectFlag;
}

I think the issue i was facing was due to myPeerConnection.getStats(null).then(stats => { stats.forEach(report => {..

It had to have await as shown in the function above.

Then call the above functions.Notice the async and await.

async function checkStatePermanent (iceState) {
videoReceivedBytetCount = 0;
audioReceivedByteCount = 0;

log('after First call')
let firstFlag = await isPermanentDisconnect();
log('Disconnect Flag is: ' + firstFlag)
log('after First call')

await customdelay(2000);
log('after 2 secs')
let secondFlag = await isPermanentDisconnect(); //Call this func again after 2 seconds to check whether data is still coming in.
log('after second call')
if(secondFlag){ //If permanent disconnect then we hangup i.e no audio/video is fllowing
    log('Disconnect Flag = Permanent')
    if (iceState == 'disconnected'){
        hangUpCall(); 
    }
}
..
}

Log prints as expected and order seems to be maintained now.

Thank you all.

Javascript - Function calls not maintaining order

2 Answers2