CODEWITHSUNDEEP
javascriptloops
Trung Bún
Trung Bún

Reputation: 1147

JavaScript setInterval() method not working as I expect it to

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?

Upvotes: 0

Views: 292

Answers (4)

Vikas
Vikas

Reputation: 7165

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

Upvotes: 1

fdomn-m
fdomn-m

Reputation: 28611

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

Upvotes: 1

adiga
adiga

Reputation: 35222

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>

Upvotes: 2

CertainPerformance
CertainPerformance

Reputation: 370689

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

Upvotes: 3

Related Questions