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?

jquery ajax

— user12345
fonte

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