how to slow down a javascript loop

Question

I would like a add a 1-2 second delay on each iteration of the following loop.

<html>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<input id="start" type="submit"> </input>
<div id='status'></div>

<script>
var geocoder=new google.maps.Geocoder();                   
var glGeocodeCount = 0 ;

$(document).ready(function() {

    $('#start').click(function() {

        //srPerformGeocode("TD Tower, 55 King Street West, Toronto, ON, Canada, M5K 1A2");      

        for(x=0;x<20;x++){
            srPerformGeocode("TD Tower, 55 King Street West, Toronto, ON, Canada, M5K 1A2");
        }
        return false;
    });          
}); 

function srPerformGeocode(address){     
    if (geocoder){                
        geocoder.geocode({ 'address': address }, function (results, status) {                                                                              
            if (status == google.maps.GeocoderStatus.OK){                                                                                                                                                                           
                $('#status').prepend("Success : " + address + "<br/>");

            }
            else{
                $('#status').prepend("Failed : " + address + "<br/>");

            }
        });
    }
}
</script>

as an example. I noted that some API's suppliers (like google) don't like you to bang too frenquently on their doors. I would like to reduce the frequency of the call by using a timer, but am having trouble using it in a loop, — Mustapha George
– Mustapha George, Commented Feb 1, 2012 at 4:29
That's true, but why would you bang on their doors with the same request every time? — ceejayoz
– ceejayoz, Commented Feb 1, 2012 at 4:45
I wouldn't, but it would not add much to the question to include 20 (or 200 addresses). My question is more about delaying loops. — Mustapha George
– Mustapha George, Commented Feb 1, 2012 at 4:48

jfriend00 · Accepted Answer · 2012-02-01 04:27:28Z

14

You can do it this way with setTimeout():

$(document).ready(function() {
    $('#start').click(function() {
        //srPerformGeocode("TD Tower, 55 King Street West, Toronto, ON, Canada, M5K 1A2");      
        var x = 0;

        function go() {
            srPerformGeocode("TD Tower, 55 King Street West, Toronto, ON, Canada, M5K 1A2");
            if (x++ < 20) {
                setTimeout(go, 2000);
            }
        }
        go();

        return false;
    });          
});

This does make me wonder why you're doing a geocode lookup on the exact same address 20 times in a row?

answered Feb 1, 2012 at 4:27

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

Comments

Neal Soni · Accepted Answer · 2019-11-25 01:18:46Z

8

Modern JS Solution:

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
}

async function slowedCode() {
    console.log("Before Delay")
    await this.timeout(Math.random() * 2000 + 500) // Wait random amount of time between [0.5, 2.5] seconds
    console.log("After Delay")
}

async function slowedForLoop() {
    const data = ["1","2","3","4","5"]
    for (let d of data) {
        console.log(d)
        await this.timeout(Math.random() * 100 + 500)
    }    
}

The only draw back is you have to execute the delay from inside an async function.

answered Nov 25, 2019 at 1:18

Neal Soni

7041 gold badge8 silver badges15 bronze badges

Comments

user1181888 · Accepted Answer · 2012-02-01 04:26:31Z

6

You probably want to use a timer for this. If you would just put a delay loop in the code, the result would only be that the code takes longer to run, but the final result will show up all at once after the code has finished.

You can use the setTimeout or setInterval methods. Example:

function(){

var instructions = [
function() { /* do something */ },
function() { /* do something */ },
function() { /* do something */ },
function() { /* do something */ }
];

var index = 0;

var handle = window.setInterval(function() {
if (index < instructions.length) {
  instructions[index++]();
} else {
  window.clearInterval(handle);
}
}, 10);

}();

answered Feb 1, 2012 at 4:26

user1181888

Comments

user191966 · Accepted Answer · 2012-02-01 04:34:00Z

1

I have a feeling you'd rather not to start next loop iteration until the geocode lookup is truly complete. So, the keyword there is "callback":

instead of the for..., do the below. I know it may not be something you're used to, but please try to grasp it (it should work).

var dogeo = function(callback)
{
    srPerformGeocode("address", callback);
};

var counter = 0;

var geoCallback = function()
{
         counter++;

         if(counter < 20)
         {
             dogeo(geoCallback);
         }

};


dogeo(geoCallback);



function srPerformGeocode(address, callback){     
    if (geocoder){                
        geocoder.geocode({ 'address': address }, function (results, status) {    


           // this function is a callback of geocode()

            if (status == google.maps.GeocoderStatus.OK){                                                                                                                                                                           
                $('#status').prepend("Success : " + address + "<br/>");

            }
            else{
                $('#status').prepend("Failed : " + address + "<br/>");

            }

            callback(); // let the caller know this is done
        });
    }
}

answered Feb 1, 2012 at 4:34

user191966

3 Comments

user191966 Over a year ago

Pausing by using setTimeout/setInterval may all work for you, but it's an illusion. If I can read your code correctly, the original problem is that your loop is quicker than geocoder.geocode returns back each time. So, the only way to not have parallel geocode calls would be to wait until one is done before the next one is started. That said, there's no need to further slow down the loop - if all you were trying to avoid were parallel calls. If you still want to pause between calls, you should still use callbacks in combination with setTimeout.

Mustapha George Over a year ago

Yes, I would like to avoid parallel calls as well as slowing down the loop. There seems to no way to make google api's to act synchronously so I have to stack everything into their sucess fuctions. I will try to understand your code...

user191966 Over a year ago

the above eliminates parallel calls; to pause between calls, do this: if(counter < 20) { window.setTimeout(function(){ dogeo(geoCallback); } }, 2000);

E.T. Deubner · Accepted Answer · 2021-03-25 08:06:37Z

1

I ended up using the modulus operator for this purpose. Then you can increase/decrease the amount it divides by to increase/decrease the delay time. Would probably be better without the for loop though.

$(document).ready(function() {

    $('#start').click(function() {
      
        var delay = 0;
        for(x=0;x<20;x){
            delay++;
            if (delay % 10 == 0) {
                srPerformGeocode("TD Tower, 55 King Street West, Toronto, ON, Canada, M5K 1A2");
                x++;
            }
        }
        return false;
    });          
});

answered Mar 25, 2021 at 8:06

E.T. Deubner

112 bronze badges

Comments

driangle · Accepted Answer · 2012-02-01 04:29:41Z

0

I encourage getting rid of the loop and using setTimeout:

    $('#start').click(function() {
        var i = 0, max = 20, delay = 2000, run;
        run = function(){
           srPerformGeocode("TD Tower, 55 King Street West, Toronto, ON, Canada, M5K 1A2");
           if(i++ < max){
              setTimeout(run, delay);
           }
        }
        run();
        return false;
    });

answered Feb 1, 2012 at 4:29

driangle

11.8k6 gold badges50 silver badges56 bronze badges

Comments

Mariusz Mleczko · Accepted Answer · 2024-02-12 11:06:35Z

0

Probably the simplest way is to call a setTimeout loop with a variable increasing delay for each loop iteration...

for (var i = 0; i < max_val; ++i) {
    setTimeout(doSomething, (milisecond_delay * i), param1, param2, param3, ...);
}

edited Feb 12, 2024 at 11:06

answered Feb 12, 2024 at 10:59

Mariusz Mleczko

212 bronze badges

Collectives™ on Stack Overflow

how to slow down a javascript loop

7 Answers 7

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related