I'm using jQuery Ajax functions to auto update my database through cron. Since there are a lot of rows to be updated, I'd like to pause the code for few milliseconds each iretation. What would be the best way to do it?

Here's sample of my code:

<?php

    $zdroje = $db->select('zdroje', 'id!=1');

    echo "<script type='text/javascript'>\n
            $(document).ready(function() {\n"; 

    foreach($zdroje as $zdroj) {

    echo "$.post( '/adminator/menu/2zajezdy/tools/01otnXml/requests.php', { 'updateXML': '".$zdroj['id']."' }, function(data) {
        // pause here!
    });\n";

    } // end: foreach

    echo "});\n</script>\n";

?>

I'm using jQuery Ajax functions to auto update my database through cron. Since there are a lot of rows to be updated, I'd like to pause the code for few milliseconds each iretation. What would be the best way to do it?

Here's sample of my code:

<?php

    $zdroje = $db->select('zdroje', 'id!=1');

    echo "<script type='text/javascript'>\n
            $(document).ready(function() {\n"; 

    foreach($zdroje as $zdroj) {

    echo "$.post( '/adminator/menu/2zajezdy/tools/01otnXml/requests.php', { 'updateXML': '".$zdroj['id']."' }, function(data) {
        // pause here!
    });\n";

    } // end: foreach

    echo "});\n</script>\n";

?>

• javascript
• jquery
• delay

6 Answers 6

There are only two ways to do this:

1. Use setTimeout (for example, 10 milliseconds):

   setTimeout(function () {
       $.post( '/adminator/menu/2zajezdy/tools/01otnXml/requests.php', { 'updateXML': '".$zdroj['id']."' }, function(data) {
           // do stuff here!
       });
   }, 10);
   

2. For loop (this is a hack, so this is not preferred):

   for(i = 0; i < 500; i++);

I suggest you take a look at jQuery's new defer system. Here's a good tutorial: http://www.erichynds.com/jquery/using-deferreds-in-jquery/

Essentially, you can create a "hold" promise like this:

function hold(delay){
    var dfd = $.Deferred();

    setTimeout(function(){
        dfd.resolve();
    }, delay);

    return dfd.promise();
}

Then string together ajax requests with it like this:

$.when($.post('yourLongUrlHere'))
    .then(hold(500))
    .then($.post('anotherUrl'))
    .then(hold(500))
    .then($.post('somethingElse.php'));

This will make each ajax request in order waiting 500 miliseconds in between each.

Should handle what you asked about w/o a problem.

you can try the .delay() function...

http://api.jquery.com/delay/

A clumsy approach might arguably be to use JavaScript's setTimeout() method, but I'd recommend you look into the jQuery functions, $.ajaxComplete(), $.ajaxStart() and $.ajaxStop().

I suppose you'd want to generate the chained call instead of plain list. I.e. what you get now is:

$.post(...)
$.post(...)
...
$.post(...)

You'd want to get something like this:

$.post(url1, function(data) {
    setTimeout(function() {
        $.post(url2, function(data) {
            setTimeout(function() {$.post(url3)}, 500);
        });
    }, 500);
});

Having that you're using PHP to generate the JavaScript code - it shouldn't be too difficult to produce the code like this. Hope this helps.

Edit: Try generating it like this

$code = "%s";
foreach($sources as $source) {
   $part = "$.post( '/adminator/menu/2zajezdy/tools/01otnXml/requests.php', { 'updateXML': '${source['id']}' }, function(data) {
      setTimeout(function() {
         %s
      }, 500);
   });"
   $code = sprintf($code, $part);
}
$code = sprintf($code, '');

You can't pause the JavaScript engine from processing code. JS has code that runs asynchronously - for example, a response from an AJAX request comes back and the callback function is executed.

setTimeout is your best friend in regards to delaying the execution of a particular function.

//Executes an alert exactly 1 second later
setTimeout(function() {
   alert('hello world'); 
}, 1000);