JavaScript setInterval（）方法无法正常运行

Question

I'm having an array of errors string, these errors are errors in a form after submitting.

I want to display these error as notification one by one after a fixed time, let say every 5 seconds.

The code that I have is:

 var array = ["1", "2", "3", "4", "5", "6"]; recursive(); function recursive() { var error = array.pop(); if (typeof error === 'undefined') { return; } else { console.log(error); // showNoti(error); } setInterval(function() { recursive() }, 5000); } 

The problem with this code is that it's running fine in the first 2 iterations, printing out 5 after 5 seconds printing 6.

But at the third iteration, it prints both string 4 and 3. Similar to the fourth iteration.

How can I fix it so that it print each element in the array in every 5 seconds?

Answer 1

Currently, each call of recursive is initializing another interval. So, for example, after the first call, there will then be one interval running: after the second call, another interval will be initialized (two intervals), etc.

Put the setInterval outside the recursive instead:

 var array = ["1", "2", "3", "4", "5", "6"]; recursive(); function recursive() { var error = array.pop(); if (typeof error === 'undefined') { return; } else { console.log(error); // showNoti(error); } } setInterval(function() { recursive() }, 500); 

Or use setTimeout instead:

 var array = ["1", "2", "3", "4", "5", "6"]; recursive(); function recursive() { var error = array.pop(); if (typeof error === 'undefined') { return; } else { console.log(error); // showNoti(error); } setTimeout(recursive, 500); } 

Answer 2

Move the setInterval outside of recursive . Every time you run recursive , you are creating a new setInterval

 var array = ["1", "2", "3", "4", "5", "6"]; recursive(); function recursive() { var error = array.pop(); if (typeof error === 'undefined') { return; } else { console.log(error); // showNoti(error); } } setInterval(recursive, 5000); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 3

On all recursive calls, new setInterval is initialised. Move it out of recursive function or use setTimeout ,

 var array = ["1", "2", "3", "4", "5", "6"]; recursive(); function recursive() { var error = array.pop(); if (typeof error === 'undefined') { return; } else { console.log(error); // showNoti(error); } } setInterval(function() { recursive() }, 5000); 

Answer 4

setInterval will start an infinitely repeating timer. In this case you are controlling whether you want it to repeat or not within your code.

That's what 'setTimeout' is for - a single delayed execution.

Change setInterval to setTimeout

var array = ["1", "2", "3", "4", "5", "6"];
recursive();

function recursive() {
  var error = array.pop();
  if (typeof error === 'undefined') {
    return;
  } 
  console.log(error);
  setTimeout(function() {
    recursive()
  }, 5000);
}