How to add delay in javascript for loop using setTimeout?

Question

I want to hold the iteration of the for-loop until the functionality in the previous iteration gets completed. I have seen many questions about setTimeout but none of them has satisfied my requirement. Can anyone help me?

function abcd() {
    var exArray = [0, 0, 1, 1, 1, 0, 0, 0];
    var index = 0;
    for (var i = 0; i < exArray.length; i++) {
        if (exArray[i] == 1) {
            addDelay(++index);

        } else {
            console.log('ended at ' + i);
        }
    }
}

seTimeout functionality is something like this

function addDelay(index) {
    setTimeout(function() {
        console.log("in Timeout loop:" + index);
    }, 2000 * index);
}

The expected output is

ended at 0

ended at 1

in Timeout loop:{{index}} // wait for delay

ended at 5

ended at 6

ended at 7

But output I see in my console is:

ended at 0

ended at 1

ended at 5

ended at 6

ended at 7

in Timeout loop:{{index}} // wait for delay

I want the ended at 5 to wait until timeout functionality of 3rd, 4th, 5th array indices. I need someone to help me on this. Thanks in advance.

your setTimeout code section is well written... try a ES6 approach: setTimeout(() => { console.log('waiting 1 second...'); }, 1000); — assembler
– assembler, Commented Oct 30, 2017 at 12:40
The setTimeout will schedule a background task and then return immediately. so your loop continues to run and after the delay the timeout function is executed, so it can't work like that. The best solution in your case might be to get rid of the for loop and replace it by a callback-loop, so after each delayed execution it call the "loop" with the next index until the end of your array. — xander
– xander, Commented Oct 30, 2017 at 12:40

Nishant · Accepted Answer · 2017-10-30 15:47:31Z

1

setTimeOut doesn't work that way. It just registers an action to be performed at a later point of time and just continues. Once this script is over, it will take up your queued up tasks and perform.

Check how setTimeout really works under the hood. Also, read more about JavaScript's Event Loop.

var input = [0, 0, 1, 1, 1, 0, 0, 0];

function immediateOrRegister(index) {
    if (index >= input.length) return;
    if (input[index] == 0) {
        console.log("No delay");
        immediateOrRegister(index + 1);
    } else if (input[index] == 1) {
        console.log("Timing out for atleast " + 2 * index + " seconds");
        setTimeout(function() {
            immediateOrRegister(index + 1)
        }, 2000 * index);
    }
}

immediateOrRegister(0);

edited Oct 30, 2017 at 15:47

answered Oct 30, 2017 at 13:20

Nishant

22.2k20 gold badges79 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mina · Accepted Answer · 2017-10-30 12:58:48Z

0

Hope I understand your question, please see this Fiddle. https://fiddle.jshell.net/qw6qp7pm/1/ (Using Underscore JS delay() http://underscorejs.org/#delay)

function abcd(index) {
  var exArray = [0, 0, 1, 1, 1, 0, 0, 0]
  var index = index ? index : 0
  if (index >= exArray.length) return false

  for (var i = index; i < exArray.length; i++) {
    if (exArray[i] == 1) {
      //addDelay(++index);
      _.delay(log, 2000, i)
      break
    } else {
      console.log('ended at ' + i)
    }
  }
}

function log(index) {
  console.log("in Timeout loop:" + index)

  // RECURSE
  abcd(index + 1)
}

abcd()

answered Oct 30, 2017 at 12:58

Mina

1,5161 gold badge10 silver badges11 bronze badges

Comments

Dibyaranjan · Accepted Answer · 2017-10-30 12:59:05Z

0

loop will execute continuously for its each index. as you need all your logs one-after-one, means you have to put delay for each index, whether its satisfy your condition or not.

function abcd() {  
    var exArray=[0,0,1,1,1,0,0,0];
    var index=0;
    var message='';
    for(var i=0;i<exArray.length; i++)    {
        if(exArray[i]==1) {
           ++index;
           message='in Timeout loop:'+i;
           addDelay(index, message);
        }else{
           message='ended at '+i;
           addDelay(index, message);
        }

    }
}


function addDelay(index, message){
    setTimeout(function () {
         console.log(message);
    }, 2000*index); 
}

answered Oct 30, 2017 at 12:59

Dibyaranjan

411 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to add delay in javascript for loop using setTimeout?

The expected output is

But output I see in my console is:

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The expected output is

But output I see in my console is:

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related