Why does everything display at once, using setTimeout in Javascript?

by

As stated in the comments, you are creating 1000 timeouts for 500 ms at the same time – after 500 ms all of them will be executed. What you want is to increase the timeout for every scheduled function:

setTimeout(function() {
    // do something
}, count * 500);

However, creating 1000 timeouts at once is not a that good idea. It would be better to use setInterval or call setTimeout “recursively” until a count of 1000 is reached, so that you only have one active timeout at a time.

var count = 0;
function update() {
    // do something
    if (++count < 1000)
        setTimeout(update, 500);
    // else everything is done
}
update();

Also, if you intend to create timeouts in a loop, be sure to be familiar with closures and their behavior when accessing counter variables after the loop ran.

More Related Contents:

  1. setTimeout / clearTimeout problems
  2. Maximum call stack size exceeded on SetTimeout recursive function (Javascript) [duplicate]
  3. How to tell .hover() to wait?
  4. How to test a function which has a setTimeout with jasmine?
  5. stop settimeout in recursive function
  6. JQuery, setTimeout not working
  7. How to dectect objects' overlaping situations in javascirpt? [closed]
  8. Turning live() into on() in jQuery
  9. jQuery/JavaScript collision detection
  10. Cross-browser window resize event – JavaScript / jQuery
  11. jQuery ajax success callback function definition
  12. Check if event exists on element [duplicate]
  13. Remove everything after a certain character
  14. Prevent jQuery UI dialog from setting focus to first textbox
  15. How to search JSON tree with jQuery
  16. How to make a simple image upload using Javascript/HTML
  17. How to scroll the window using JQuery $.scrollTo() function
  18. Differences between contentType and dataType in jQuery ajax function
  19. How to replace url parameter with javascript/jquery?
  20. jQuery sort elements using data id
  21. Fast way to get the min/max values among properties of object
  22. Getting the User Agent with JavaScript
  23. jQuery UI AutoComplete: Only allow selected valued from suggested list
  24. How to prevent form element from sending some fields we don’t want?
  25. Disabling middle click scrolling with javascript
  26. How to stop form submit during ajax call
  27. iphone/ipad triggering unexpected resize events
  28. Remove URL parameters without refreshing page
  29. Html duplicated ID
  30. .js.erb VS .js

Leave a Comment