Settimeout Not Delaying Function Call In $.each

I several divs on my site, I'd like to update one by one. In order not to spam the server with 200+ requests at once, I'd like to delay them by 1s each. What I tried: var $tourBox

Solution 1:

Back in 2008 I wrote a slowEach() plugin for jQuery that does what you're looking for. It's basically a drop-in replacement for $.each() and $(...).each() that takes a time interval, so the callback is called with that amount of delay for each element:

jQuery.slowEach = function(array, interval, callback ) {
    if( ! array.length ) return;
    var i = 0;
    next();
    functionnext() {
        if( callback.call( array[i], i, array[i] ) !== false ) {
            if( ++i < array.length ) {
                setTimeout( next, interval );
            }
        }
    }
};

jQuery.fn.slowEach = function( interval, callback ) {
    jQuery.slowEach( this, interval, callback );
};

With that code, you can then do:

$('.tour-box').slowEach( 1000, function() {
    getUpdate( $(this) );
});

One thing to note about this code is that it uses only a single timer at a time, instead of making hundreds of setTimeout() calls to fire up multiple timers at once. This makes it much easier on system resources.

Solution 2:

Your for each is calling all of the timeouts at once. It is not waiting one second in between calling each time out. So you have thousands of objects that are being scheduled to call getUpdate($box); after one second.

What you can do is increase the timeout in each iteration.

var $tourBox = $('.tour-box');
var delay = 1000;
$tourBox.each(function () {
    var $box = $(this);
    setTimeout(function () {
        getUpdate($box);
    }, delay);
    delay += 1000;
});

This will cause your first timeout to be fired after 1 second, and your second after two seconds and so on.

Solution 3:

Calling one by one could be another solution to avoid spam like request. In that case, this could be a solution:

$(document).ready(function(){

    var$tourBox = $('.tour-box'),
        curIndex = 0,
        totalBox = $tourBox.length,
        url = $('#ajax-route-object-status').val(),


    functiongetUpdate(){

        var$box = $tourBox.get( curIndex );

        if ( typeof $box === 'undefined'){
            // No more box to processreturn; // exit
        }

        var$so = $box.attr('data-so');

        $.get($url, {
            so: $so
        }).success(function (data) {
            var$bg = 'bg-gray';
            if (data.extra.isStarted === true && data.extra.isFinished === false) {
                $bg = 'bg-orange'
            }
            if (data.extra.isStarted === true && data.extra.isFinished === true) {
                $bg = 'bg-green'
            }
            if (data.extra.isLate === true && data.extra.isFinished === false) {
                $bg = 'bg-red'
            }
            $box.removeClass('bg-gray').removeClass('bg-green').removeClass('bg-orange').removeClass('bg-red').addClass($bg);
        }).always(function(){

            // Increment index to process
            curIndex++;

            // Finished either with success or failed// Proceed with next
            getUpdate();
        });       
    }
});