Javascript SetTimeout and Loops [duplicate]

by

You have two problems :

  • no will have the value of end of loop when the callback is called
  • you’re programming all your timeouts 2000 ms from the same time, the time the loop run.

Here’s how you could fix that :

var t = 0
while (no != 500) {
   (function(no) {
      t += 2000;
      setTimeout(function() { size(no,no);} ,t);
   })(no);
   no  = no+50; // could be written no += 50
}

The immediately executed function creates a scope which protects the value of no.

A little explanation about (function(no) { :

The scope of a variable is either

  • the global scope
  • a function

The code above could have been written as 

var t = 0
while (no != 500) {
   (function(no2) {
      t += 2000;
      setTimeout(function() { size(no2,no2);} ,t);
   })(no);
   no += 50;
}

Here it’s probably more clear that we have two variables :

  • no, whose value changes with each iteration and is 500 when the timeouts are called
  • no2, in fact one variable no2 per call of the inner anonymous function

Each time the inner anonymous function is called, it declares a new no2 variable, whose value is no at the time of call (during iteration). This variable no2 is thus protected and is used by the callback given to setTimeout.

More Related Contents:

  1. Why is bracket notation not working here? [duplicate]
  2. Why is set.timeout not working in this php while loop?
  3. How can I pass a parameter to a setTimeout() callback?
  4. Pass correct “this” context to setTimeout callback?
  5. Combination of async function + await + setTimeout
  6. setTimeout calls function immediately instead of after delay
  7. Difference between setTimeout with and without quotes and parentheses
  8. Why is my function call that should be scheduled by setTimeout executed immediately? [duplicate]
  9. Execute script after specific delay using JavaScript
  10. What is the reason JavaScript setTimeout is so inaccurate?
  11. JavaScript : For loop with timeout
  12. Passing functions to setTimeout in a loop: always the last value?
  13. JavaScript setTimeout() won’t wait to Execute? [duplicate]
  14. setTimeout / clearTimeout problems
  15. setInterval/setTimeout return value
  16. Is there a faster way to yield to Javascript event loop than setTimeout(0)?
  17. What happens to setTimeout when the computer goes to sleep?
  18. setTimeout behaviour with blocking code
  19. How many concurrent setTimeouts before performance issues?
  20. How to tell .hover() to wait?
  21. stop settimeout in recursive function
  22. Why doesn’t setTimeout(.., 0) execute immediately?
  23. JQuery, setTimeout not working
  24. Are equal timeouts executed in order in Javascript?
  25. How to use “setTimeout” to invoke object itself
  26. How browser executes Javascript and renders asynchronously
  27. how many javascript setTimeout/ setInterval call can be set simultaneously in one page?
  28. setTimeout Internet Explorer
  29. setTimeout() method inside a while loop [duplicate]
  30. Is it bad practice to pass a string to settimeout? If yes, why? [duplicate]

Leave a Comment