setTimeout method executing one time

Question

When I click the checkBox, the function hesitates 5 seconds, and then rapidly loops through $.each skipping the setTimeout method. I assumed setTimeout would delay 5 seconds on each pass of the $.each loop? How can I make that so? Thanks

    checkBox.addEventListener('click', function() {
            var countLoop = 0;            
            $.each(placeObject, function(key,value) {
                setTimeout(function() {placesSearch(key,value);}, 5000);
                console.log("Loop :" + countLoop++);                
            });         
        }, 
        false);

You can't pause in JavaScript. The setTimeout() function establishes an action that will happen the given number of milliseconds in the future, but it returns immediately. — Pointy
– Pointy, Commented Aug 13, 2014 at 16:47

Brennan · Accepted Answer · 2014-08-13 16:51:50Z

2

setTimeout returns the ID of the timeout, and does so immediately. It queues the action to be executed at a set time in the future. It won't actually pause the execution of the code it resides in, however, due to the immediate return.

If you want the code in $.each to be run after a pause, all of the code within the $.each needs to be wrapped with the setTimeout

answered Aug 13, 2014 at 16:51

Brennan

5,7822 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RustyShackleford Over a year ago

Thanks, it makes sense now. I was under the impression it delayed it.

Robin Rizvi · Accepted Answer · 2014-08-13 18:38:27Z

Check this fiddle: http://jsfiddle.net/6dzp1sj7/1/

checkBox.addEventListener('click', function() {
            var countLoop = 0;

            $.each(placeObject, function(key,value) {
                setTimeout(function() {
                    placesSearch(key,value);
                    console.log("Loop :" + countLoop++);
                }, (5000 * (key + 1)));           
            });         
        }, 
        false);

Here is some JS KungFU for you: Here is its fiddle http://jsfiddle.net/6dzp1sj7/3/

        var placeObject = [0, 1, 2, 3, 4, 5];

        var countLoop = 0;         

        function tmp (key, value) {
                console.log(key);
                console.log(value);
                console.log("Loop :" + countLoop++);
        }

        var code = "";

        $.each(placeObject, function(key,value) {             
            var tmpl = "setTimeout(function() {tmp(" + key + ", " + value + ");__##__}, 1000);";

            if (key == 0) code = tmpl;

            if (key != 0) {
                code = code.replace('__##__', tmpl);
            }

            if (key == (placeObject.length - 1)) {
                code = code.replace('__##__', '');
                //console.log(code);
                eval(code);
            }                               
        });

Note: Never use a jack-hammer to drill just a hole.

How does this help, doesn't this just include the console statements? It still delays 1x and then rapidly loops there after.

Jim Jeffers · Accepted Answer · 2014-08-14 16:52:52Z

1

If you want each to fire within 5 seconds of one another, i.e. first iteration fires 5 seconds later, second iteration fires 10 seconds later, etc.. Then you need to multiply the delay of each individual timeout via the count index.

var countLoop = 1;            
$.each(placeObject, function(key,value) {
  setTimeout(function() {placesSearch(key,value);}, 5000*countLoop);
  console.log("Loop :" + countLoop++);                
});

I've created a demo that also illustrates how the scope would affect the values you are printing out with console.log(). See this fiddle for an example:

http://jsfiddle.net/smtryj6s/6/

edited Aug 14, 2014 at 16:52

answered Aug 13, 2014 at 16:52

Jim Jeffers

18k4 gold badges43 silver badges52 bronze badges

5 Comments

RustyShackleford Over a year ago

I edited my code and it is working, mostly. For some reason it keeps printing to console "Loop : 32" (There are 32 items in my placeObject)

guest271314 Over a year ago

@wannabe_n00b Try jsfiddle.net/skno39yh/1 , without value = key; piece . If 32 items in placeObject , index (key) not 31 (0-31) ?

Jim Jeffers Over a year ago

@wannabe_n00b Can you post a snippet of your code now? The code executing in the will rely on its parent 'scope' so if console.log(countLoop) is inside if of the timeout it will already be 32 by the time the code is executed. Does that make sense? If you wanted console.log to log the correct iteration you'd need to assign it to a temporary variable. See my fiddle: jsfiddle.net/smtryj6s/5 (does this answer your question?)

RustyShackleford Over a year ago

I mistakenly used countLoop to set value, it works great now. Thanks. The setTimeout has allowed me to use the Google Maps API now. I was getting rejected previously for making requests too quickly

Jim Jeffers Over a year ago

No problem! If I answered your Q please don't forget to mark my answer as the correct solution :)

Collectives™ on Stack Overflow

setTimeout method executing one time

3 Answers 3

1 Comment

1 Comment

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

5 Comments

Related