Question

47

setTimeout not working inside forEach

rated 0 times [ 53] [ 6] / answers: 1 / hits: 45956 / 8 Years ago, wed, june 22, 2016, 12:00:00

I have a forEach that calls a function. There needs to be a delay between each time it is called. I've put it inside a setTimeout inside the forEach. It isn't respecting the timeout after the first wait. Instead it is waiting once, then running all at once. I've set the timeout to 5 seconds and I am using a console to confirm. 5 seconds of wait, then several foobar console logs all at once.

Why am I getting this behavior?

var index = 0;

json.objects.forEach(function(obj) {

    setTimeout(function(){

        console.log('foobar');

        self.insertDesignJsonObject(obj, index);

    }, 5000);

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayaw

Add To Favorites

Follow

Total Points: 749

Total Questions: 88

Total Answers: 86

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

tayaw questions

1 How to enable cache for getServerSideProps?

Thu, Mar 3, 22, 00:00, 2 Years ago

1 navigator.clipboard.readText() is not working in Firefox

Fri, May 7, 21, 00:00, 3 Years ago

1 Vuetify form .$refs validate is not a function

Wed, Oct 7, 20, 00:00, 4 Years ago

1 Using absolute position to place image above another image using Tailwind CSS

Sun, Sep 6, 20, 00:00, 4 Years ago

1 How to make div tag clickable with Link from react-router-dom?

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 8 Years ago kareem · Accepted Answer

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