setTimeout not working inside forEach

by

What Jason said is totally correct in his answer but I thought I would give it a shot, to better clarify.

This is actually a classic closure problem. Typically it would look something like:

for(var i = 0; i < 10; i++){
    setTimeout(function(){
        console.log(i);
    },i * 1000)
}

The novice would expect the console to show:

0
(0 seconds pass...)
1
(1 second passes...)
2
(etc..)

But that just isn’t the case! What you would actually see is the number 10 getting logged 10 times (1x per second)!

“Why does that happen?” Great question. Closure scope. The for loop above lacks closure scope because in javascript, only functions (lambdas) have closure scope!

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

However! Your attempt would have achieved the desired output if you had tried this:

    json.objects.forEach(function(obj,index,collection) {
        setTimeout(function(){
            console.log('foobar');
            self.insertDesignJsonObject(obj, index);
        }, index * 5000);
    });

Because you have access to the “closur-ed” index variable – you can rely on its state being the expected state when the function (lambda) is invoked!

Other Resources:

How do JavaScript closures work?

http://javascript.info/tutorial/closures

http://code.tutsplus.com/tutorials/closures-front-to-back–net-24869

More Related Contents:

  1. The invocation context (this) of the forEach function call
  2. Why doesn’t console.log work when passed as a parameter to forEach?
  3. What is wrong with this function
  4. Why the timer setTimeout returns the first value “2”
  5. Short circuit Array.forEach like calling break
  6. How to make a promise from setTimeout
  7. Why can I use a function before it’s defined in JavaScript?
  8. forEach on querySelectorAll not working in recent Microsoft browsers
  9. Javascript efficiency: ‘for’ vs ‘forEach’ [closed]
  10. Adding console.log to every function automatically
  11. Why does setTimeout() “break” for large millisecond delay values?
  12. forEach on array of undefined created by Array constructor
  13. How to loop through all the elements returned from getElementsByTagName [duplicate]
  14. Extending an Object in Javascript
  15. In Javascript/jQuery what does (e) mean?
  16. Get loop counter/index using for…of syntax in JavaScript
  17. Make function wait until element exists
  18. Javascript: Call a function after specific time period
  19. anchor jumping by using javascript
  20. Is NaN equal to NaN?
  21. Immediate function using JavaScript ES6 arrow functions
  22. Using forEach on an array from getElementsByClassName results in “TypeError: undefined is not a function”
  23. Calling a Javascript Function from Console
  24. What is the JavaScript convention for no operation?
  25. Function and Object Javascript
  26. includes() not working in all browsers
  27. javascript adding property to function
  28. Lambda function syntax in JavaScript without curly braces
  29. What are the different ways of writing an IIFE? What are their use cases?
  30. Why can’t I use a Javascript function before its definition inside a try block?

Leave a Comment