Come attivare periodicamente la richiesta AJAX?

113

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

Questo script ricarica o aggiorna la pagina ogni 5 secondi. Ma voglio farlo usando jQuery e AJAX call. È possibile?

jquery ajax

— user12345
fonte

281

Come altri hanno sottolineato, setInterval e setTimeout faranno il trucco. Volevo evidenziare una tecnica un po 'più avanzata che ho imparato da questo eccellente video di Paul Irish: http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

Per le attività periodiche che potrebbero richiedere più tempo dell'intervallo di ripetizione (come una richiesta HTTP su una connessione lenta) è meglio non utilizzarlo setInterval(). Se la prima richiesta non è stata completata e ne inizi un'altra, potresti finire in una situazione in cui hai più richieste che consumano risorse condivise e si affamano a vicenda. Puoi evitare questo problema aspettando di programmare la richiesta successiva fino al completamento dell'ultima:

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

Per semplicità ho utilizzato il callback di successo per la pianificazione. Il lato negativo di questo è che una richiesta non riuscita interromperà gli aggiornamenti. Per evitare ciò è possibile utilizzare invece la richiamata completa:

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

— drewish
fonte

3

Non è come una chiamata di funzione ricorsiva? Se sì, allora va bene lasciarlo funzionare per un lungo periodo di tempo più e più volte, perché è ricorsivo? può essere un caso di ricorsione infinita fintanto che ajax continua a essere eseguito con successo

— Rahul Dole

1

Inoltre, se usi setTimeout, c'è un modo per fermare questo thread dall'esterno di questo blocco di codice? Come in setInterval, puoi semplicemente chiamare clearInterval ().

— Rahul Dole

16

@RahulDole è una buona domanda ma non è ricorsiva. Non viene chiamato direttamente dalla funzione worker, quindi lo stack non continuerà a crescere. Per il secondo punto, controlla i documenti per setTimeout () e vedrai che restituisce un id numerico che può essere passato a clearTimeout ().

— pareggiato il

7

@RahulDole se sei in Chrome gioca con console.trace () per vedere lo stack di chiamate di una funzione. Le funzioni invocate da setTimeout () avranno uno stack molto ridotto e sicuramente non includeranno la funzione che ha chiamato setTimeout ().

— pareggiato il

1

@Anupal crea solo una nuova domanda.

— pareggiò il

34

Sì, puoi utilizzare il setTimeout()metodo o il setInterval()metodo JavaScript per richiamare il codice che desideri eseguire. Ecco come potresti farlo con 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

Usa solo setTimeout (executeQuery, 5000); invece di setTimeout ('executeQuery ()', 5000); - è più breve e più veloce.

— rsp

4

Puoi usare setTimeouto setInterval.

La differenza è che setTimeout attiva la tua funzione solo una volta, quindi devi impostarla di nuovo. setInterval continua a innescare l'espressione ancora e ancora, a meno che tu non gli dica di fermarsi

— Puneet
fonte

1

Ho provato il codice seguente,

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

Questo non ha funzionato come previsto per l'intervallo specificato, la pagina non è stata caricata completamente e la funzione è stata chiamata continuamente. È meglio chiamare setTimeout(executeQuery, 5000);all'esterno executeQuery()in una funzione separata come di seguito,

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

Ha funzionato esattamente come previsto.

— Srihari
fonte