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);

Answer 1

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

Answer 2

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.

Answer 3

If you want each to fire within 5 seconds of one another, ie 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/