Como disparar a solicitação AJAX periodicamente?

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

Este script recarrega ou atualiza a página a cada 5 segundos. Mas eu quero fazer isso usando jQuery e chamada AJAX. É possível?

user12345
fonte

Respostas:

281

Como outros indicaram, setInterval e setTimeout resolverão o problema. Queria destacar uma técnica um pouco mais avançada que aprendi neste excelente vídeo de Paul Irish: http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

Para tarefas periódicas que podem demorar mais do que o intervalo de repetição (como uma solicitação HTTP em uma conexão lenta), é melhor não usar setInterval(). Se a primeira solicitação não foi concluída e você inicia outra, pode acabar em uma situação em que há várias solicitações que consomem recursos compartilhados e deixam umas às outras com fome. Você pode evitar esse problema esperando para agendar a próxima solicitação até que a última seja concluída:

// 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);
  });
})();

Para simplificar, usei o retorno de chamada de sucesso para agendamento. O lado negativo disso é que uma solicitação com falha interromperá as atualizações. Para evitar isso, você pode usar o retorno de chamada completo:

(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);
    }
  });
})();
atraente
fonte
3
Não é como uma chamada de função recursiva? Se sim, então é correto deixá-lo rodar por um longo período de tempo indefinidamente, porque é recursivo? pode ser um caso de recursão infinita, desde que o ajax continue sendo executado com sucesso
Rahul Dole
1
Além disso, se você usar setTimeout, há uma maneira de interromper esse thread de fora desse bloco de código? Como em setInterval, você pode simplesmente chamar clearInterval ().
Rahul Dole
16
@RahulDole é uma boa pergunta, mas não é recursiva. Não é chamado diretamente da função de trabalho, portanto, a pilha não continuará a crescer. Para o seu segundo ponto, verifique os documentos para setTimeout () e você verá que ele retorna um id numérico que pode ser passado para clearTimeout ().
empate em
7
@RahulDole se você estiver no Chrome, brinque com console.trace () para ver a pilha de chamadas de uma função. As funções invocadas por setTimeout () terão uma pilha muito curta e definitivamente não incluirão a função que chamou setTimeout ().
desenhou em
1
@Anupal basta criar uma nova pergunta.
desenhou em
34

Sim, você pode usar o setTimeout()método JavaScript ou o setInterval()método para invocar o código que deseja executar. Veja como você pode fazer isso com 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);
});
Tahbaza
fonte
1
Use apenas setTimeout (executeQuery, 5000); em vez de setTimeout ('executeQuery ()', 5000); - é mais curto e mais rápido.
rsp de
4

Você pode usar setTimeoutou setInterval.

A diferença é - setTimeout dispara sua função apenas uma vez, e então você deve configurá-la novamente. setInterval continua acionando a expressão repetidamente, a menos que você diga para ela parar

Puneet
fonte
1

Tentei o código abaixo,

    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);
});

Isso não funcionou como esperado para o intervalo especificado, a página não carregou completamente e a função foi chamada continuamente. É melhor ligar para setTimeout(executeQuery, 5000);fora executeQuery()em uma função separada como abaixo,

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();
});

Isso funcionou exatamente como pretendido.

Srihari
fonte