Wie kann ich eine AJAX-Anfrage regelmäßig auslösen?

113

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

Dieses Skript lädt die Seite alle 5 Sekunden neu oder aktualisiert sie. Aber ich möchte es mit jQuery und AJAX aufrufen. Ist es möglich?

jquery ajax

— user12345
quelle

281

Wie andere bereits betont haben, werden setInterval und setTimeout den Trick machen. Ich wollte eine etwas fortgeschrittenere Technik hervorheben, die ich aus diesem hervorragenden Video von Paul Irish gelernt habe: http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

Für periodische Aufgaben, die möglicherweise länger als das Wiederholungsintervall dauern (wie eine HTTP-Anforderung bei einer langsamen Verbindung), ist es am besten, sie nicht zu verwenden setInterval(). Wenn die erste Anforderung nicht abgeschlossen ist und Sie eine andere starten, kann es vorkommen, dass Sie mehrere Anforderungen haben, die gemeinsam genutzte Ressourcen verbrauchen und sich gegenseitig verhungern lassen. Sie können dieses Problem vermeiden, indem Sie warten, bis die letzte Anforderung abgeschlossen ist:

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

Der Einfachheit halber habe ich den Erfolgsrückruf für die Planung verwendet. Die Kehrseite davon ist, dass eine fehlgeschlagene Anforderung Aktualisierungen stoppt. Um dies zu vermeiden, können Sie stattdessen den vollständigen Rückruf verwenden:

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

— zeichnisch
quelle

3

Ist das nicht wie ein rekursiver Funktionsaufruf? Wenn ja, ist es dann in Ordnung, es immer und immer wieder laufen zu lassen, weil es rekursiv ist? kann ein Fall von unendlicher Rekursion sein, solange Ajax weiterhin erfolgreich ausgeführt wird

— Rahul Dole

1

Wenn Sie setTimeout verwenden, gibt es dann eine Möglichkeit, diesen Thread von außerhalb dieses Codeblocks zu stoppen? Wie in setInterval können Sie clearInterval () einfach aufrufen.

— Rahul Dole

16

@ RahulDole das ist eine gute Frage, aber es ist nicht rekursiv. Es wird nicht direkt von der Worker-Funktion aufgerufen, sodass der Stack nicht weiter wächst. Überprüfen Sie für Ihren zweiten Punkt die Dokumente auf setTimeout () und Sie werden sehen, dass eine numerische ID zurückgegeben wird, die an clearTimeout () übergeben werden kann.

— Zeichnen

7

@RahulDole Wenn Sie in Chrome sind, spielen Sie mit console.trace () herum, um den Aufrufstapel einer Funktion anzuzeigen. Von setTimeout () aufgerufene Funktionen haben einen sehr kurzen Stapel und enthalten definitiv nicht die Funktion setTimeout ().

— Zeichnen

1

@ Anupal erstelle einfach eine neue Frage.

— Zeichnen

34

Ja, Sie können entweder die JavaScript- setTimeout()Methode oder die JavaScript- Methode setInterval()verwenden, um den Code aufzurufen, den Sie ausführen möchten. So können Sie es mit setTimeout machen:

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
quelle

1

Verwenden Sie einfach setTimeout (executeQuery, 5000). anstelle von setTimeout ('executeQuery ()', 5000); - Es ist kürzer und schneller.

— rsp

4

Sie können setTimeoutoder verwenden setInterval.

Der Unterschied besteht darin, dass setTimeout Ihre Funktion nur einmal auslöst und Sie sie dann erneut einstellen müssen. setInterval löst immer wieder einen Ausdruck aus, es sei denn, Sie weisen ihn an, anzuhalten

— Puneet
quelle

1

Ich habe den folgenden Code ausprobiert:

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

Dies funktionierte für das angegebene Intervall nicht wie erwartet, die Seite wurde nicht vollständig geladen und die Funktion wurde kontinuierlich aufgerufen. Es ist besser, setTimeout(executeQuery, 5000);draußen executeQuery()in einer separaten Funktion wie unten aufzurufen.

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

Dies funktionierte genau wie beabsichtigt.

— Srihari
quelle