Як періодично запускати запит AJAX?

113

<meta http-equiv="Refresh" Content="5">

Цей сценарій перезавантажує або оновлює сторінку кожні 5 секунд. Але я хочу це зробити за допомогою jQuery та AJAX виклику. Це можливо?

jquery ajax

— user12345
джерело

281

Як зазначають інші, setInterval і setTimeout виконають свою справу. Я хотів виділити трохи більш досконалу техніку, яку я навчився з цього чудового відео Пола Ірландського: http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

Для періодичних завдань, які можуть зайняти більше часу, ніж інтервал повторення (наприклад, HTTP-запит при повільному з’єднанні), краще не використовувати setInterval(). Якщо перший запит не виконано, а ви починаєте інший, ви можете опинитися в ситуації, коли у вас є кілька запитів, які споживають спільні ресурси та голодують один за одним. Ви можете уникнути цієї проблеми, чекаючи запланувати наступний запит до завершення останнього запиту:

// Use a named immediately-invoked function expression.
(function worker() {
  $.get('ajax/test.html', function(data) {
    // Now that we've completed the request schedule the next one.
    $('.result').html(data);
    setTimeout(worker, 5000);
  });
})();

Для простоти я використав зворотній виклик успіху для планування. Нижня сторона цього невдалого запиту зупинить оновлення. Щоб уникнути цього, ви можете використовувати повний зворотний дзвінок:

(function worker() {
  $.ajax({
    url: 'ajax/test.html', 
    success: function(data) {
      $('.result').html(data);
    },
    complete: function() {
      // Schedule the next request when the current one's complete
      setTimeout(worker, 5000);
    }
  });
})();

— древ
джерело

3

Це не схоже на рекурсивний виклик функції? Якщо так, то чи добре це давати тривалий час повторюватися, оскільки це рекурсивно? може бути випадком нескінченної рекурсії, поки Ajax успішно виконує

— Рахул Доул

1

Крім того, якщо ви використовуєте setTimeout, то чи є спосіб зупинити цей потік поза цим блоком коду? Як і в setInterval, ви можете просто зателефонувати clearInterval ().

— Рахул Доул

16

@RahulDole - це гарне запитання, але воно не є рекурсивним. Це не викликається безпосередньо з робочої функції, тому стек не продовжує зростати. Для другого моменту ознайомтеся з документами для setTimeout (), і ви побачите, що він повертає числовий ідентифікатор, який може бути переданий до clearTimeout ().

— велетенський

7

@RahulDole, якщо у вас є хром, пограйте з console.trace (), щоб побачити стек виклику функції. Функції, на які посилається setTimeout (), матимуть дуже короткий стек, і він точно не буде включати функцію, що називається setTimeout ().

— велетенський

1

@Anupal просто створити нове запитання.

— весело

34

Так, ви можете використовувати або setTimeout()метод JavaScript, або setInterval()метод, щоб викликати код, який ви хочете запустити. Ось як це можна зробити за допомогою setTimeout:

function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  setTimeout(executeQuery, 5000); // you could choose not to continue on failure...
}

$(document).ready(function() {
  // run the first time; all subsequent calls will take care of themselves
  setTimeout(executeQuery, 5000);
});

— Тахбаза
джерело

1

Використовувати тільки setTimeout (ExecuteQuery, 5000); замість setTimeout ('ExecuteQuery ()', 5000); - це коротше і швидше.

— rsp

4

Ви можете використовувати setTimeoutабо setInterval.

Різниця полягає в тому, що setTimeout запускає вашу функцію лише один раз, і тоді ви повинні встановити її знову. setInterval продовжує ініціювати вираз знову і знову, якщо ви не скажете йому припинити

— Puneet
джерело

1

Я спробував код нижче,

    function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  setTimeout(executeQuery, 5000); // you could choose not to continue on failure...
}

$(document).ready(function() {
  // run the first time; all subsequent calls will take care of themselves
  setTimeout(executeQuery, 5000);
});

Це не працювало так, як очікувалося протягом зазначеного інтервалу, сторінка не завантажувалася повністю і функція викликалася постійно. Краще зателефонувати на setTimeout(executeQuery, 5000);вулицю executeQuery()в окрему функцію, як показано нижче,

function executeQuery() {
  $.ajax({
    url: 'url/path/here',
    success: function(data) {
      // do something with the return value here if you like
    }
  });
  updateCall();
}

function updateCall(){
setTimeout(function(){executeQuery()}, 5000);
}

$(document).ready(function() {
  executeQuery();
});

Це спрацювало точно так, як було задумано.

— Шріхарі
джерело