Javascript "for" Loop Issue When Using Ajax, The Loop Has Access Even When Condition Is False

Working with laravel, the system we were developing was crashing on this view on the 'onready' event. After looking at the code, we found the problem was inside the for loop. $(doc

Solution 1:

The downCount callback is executed once the countdown is finished. Meaning that this isn't executed right away.

Because of this, your loop keeps incrementing 'j' which means that once the callback is executed, 'j' will be at the maximum value.

Here is a simple demonstration of what you are experiencing. It will log '5' multiple times, as opposed to 0,1,2,3,4. The reason why it is 5 is because the i will increment first and then the condition is checked! This is exactly why your code is crashing. Since j increments up to one more than the array length, to check the condition!

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 100)
}

The easiest solution is to use let as opposed to var as they are scope bound.

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 100)
}

If you don't have access to let, you can use a closure

for (var i = 0; i < 5; i++) {
  (function(val) {
    setTimeout(function() {
    console.log(val)
  }, 100)
  })(i)
}

@Vlaz was correct with his scoping article. It is a great read to enlighten you even further!