Как периодически запускать запрос 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 ().
Rahul Dole
16
@RahulDole, это хороший вопрос, но он не рекурсивный. Он не вызывается напрямую из рабочей функции, поэтому стек не будет расти. Что касается второго пункта, ознакомьтесь с документацией для setTimeout (), и вы увидите, что он возвращает числовой идентификатор, который можно передать в clearTimeout ().
drewish
7
@RahulDole, если вы в chrome, поиграйте с console.trace (), чтобы увидеть стек вызовов функции. Функции, вызываемые setTimeout (), будут иметь очень короткий стек, и он определенно не будет включать функцию, которая вызывала setTimeout ().
drewish
1
@Anupal просто создай новый вопрос.
нарисовал 09
34

Да, вы можете использовать setTimeout()метод или setInterval()метод JavaScript для вызова кода, который вы хотите запустить. Вот как это можно сделать с помощью 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();
});

Это сработало именно так, как задумано.

Шрихари
источник