Установите задержку в повторяющейся функции jQuery/Ajax

Ответ 1

Я никогда не понимал, почему люди всегда добавляют свои AJAX-запросы в интервалы, вместо того, чтобы позволить успешным вызовам AJAX просто называть себя, все время рискуя серьезной нагрузкой на сервер через несколько запросов, а не просто делая другой звонок, как только у вас был успешный вернитесь.

В этом свете мне нравится писать решения, в которых звонки AJAX просто называет себя завершением, например:

// set your delay here, 2 seconds as an example...
var my_delay = 2000;

// call your ajax function when the document is ready...
$(function() {
    callAjax();
});

// function that processes your ajax calls...
function callAjax() {
    $.ajax({
        // ajax parameters here...
        // ...
        success: function() {
            setTimeout(callAjax, my_delay);
        }
    });
}

Надеюсь, это имеет смысл!:)

Обновление:

После повторного рассмотрения этого вопроса мне было доведено до сведения, что в исходном вопросе, который мне необходимо уточнить и адресовать, возникла проблема в PHP-коде.

Хотя script выше будет отлично работать при создании задержки между вызовами AJAX, при добавлении в PHP-код в исходном сообщении script будет просто echo 'd столько раз, сколько количество строит SQL-запрос, создает несколько функций с тем же именем и, возможно, одновременно вызывает все вызовы AJAX... не очень-то круто...

Имея это в виду, я предлагаю следующее дополнительное решение: создайте array с PHP скрипт, который может быть переварен JavaScript одним элементом за раз, чтобы достичь желаемого результата. Во-первых, PHP для построения строки массива JavaScript...

<?php 
    include("includes/configuratie.php");
    $strSQL = mysql_query("SELECT workerID FROM tWorkers ORDER BY workerID ASC");

    // build the array for the JavaScript, needs to be a string...
    $javascript_array = '[';
    $delimiter = '';
    while($row = mysql_fetch_assoc($strSQL))
    {
        $javascript_array .= $delimiter . '"'. $row['workerID'] .'"'; // with quotes
        $delimiter = ',';
    }
    $javascript_array .= ']';
    // should create an array string, something like:
    // ["1","2","3"]
?>

Далее, JavaScript для обработки и обработки массива, который мы только что создали...

// set your delay here, 2 seconds as an example...
var my_delay = 2000;

// add your JavaScript array here too...
var my_row_ids = <?php echo $javascript_array; ?>;

// call your ajax function when the document is ready...
$(function() {
    callAjax();
});

// function that processes your ajax calls...
function callAjax() {
    // check to see if there are id remaining...
    if (my_row_ids.length > 0)
    {
        // get the next id, and remove it from the array...
        var next_id = my_row_ids[0];
        my_row_ids.shift();
        $.ajax({
            cache    : false,
            url      : 'ajax2.php',
            data     : "workerID=" + next_id, // next ID here!
            dataType : 'json',
            success  : function(data) {
                           // do necessary things here...
                           // call your AJAX function again, with delay...
                           setTimeout(callAjax, my_delay);
                       }
        });
    }
}

Ответ 2

Примечание: ответ Криса Кемпена (выше) лучше. Используйте этот. Он использует эту технику внутри процедуры AJAX. См. этот ответ, почему использование setTimeout предпочтительнее, чем setInterval.

//Global var
is_expired = 0;

$(function (){

    var timer = setInterval(doAjax, 800);

    //At some point in future, you may wish to stop this repeating command, thus:
    if (is_expired > 0) {
        clearInterval(timer);
    }

}); //END document.ready

function doAjax() {
    $.ajax({                                      
        cache: false,
        url: 'ajax2.php',        
        data: "workerID=<?=$row['workerID'];?>",
        dataType: 'json',    
        success: function(data) {
            var id = data[0];              //get id
            var vname = data[1];           //get name
            //--------------------------------------------------------------------
            // 3) Update html content
            //--------------------------------------------------------------------
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
        }
    }); //END ajax code block
} //END fn doAjax()

Ответ 3

Я разработал метод обертки, который добавляет пользовательскую задержку по умолчанию для метода $.ajax по умолчанию. Это способ иметь (на всех jQuery ajax-звонках) задержку на протяжении всего вашего приложения.

Очень удобно имитировать реальную случайную задержку.

(function(){
  $._ajaxDelayBk = $.ajax; // save reference to the "real" ajax method

 // override the method with a wrapper
  $.ajax = function(){
    var def = new $.Deferred(),
        delay = typeof $.ajax.delay == 'undefined' ? 500 : $.ajax.delay, 
        delayTimeout,
        args = arguments[0];

    // set simulated delay (random) duration
    delayTimeout = setTimeout(function(){
      $._ajaxDelayBk(args)
        .always(def.resolve)
        .done(def.resolve)
        .fail(def.reject)
    }, delay);

    def.abort = function(){
        clearTimeout(delayTimeout);
    };

    return def;
  }
})();

ПРИМЕР ПРИМЕР:

// optional: set a random delay to all `ajax` calls (between 1s-5s)
$.ajax.delay = Math.floor(Math.random() * 5000) + 1000;

var myAjax = $.ajax({url:'http://whatever.com/API/1', timeout:5000})
  .done(function(){ console.log('done', arguments) })
  .fail(function(){ console.log('fail', arguments) })
  .always(function(){ console.log('always', arguments) })

// Can abort the ajax call
// myAjax.abort();