Bagaimana cara mengaktifkan permintaan AJAX secara berkala?

113

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

Skrip ini memuat ulang atau menyegarkan halaman setelah setiap 5 detik. Tapi saya ingin melakukannya menggunakan panggilan jQuery dan AJAX. Apa itu mungkin?

jquery ajax

— pengguna12345
sumber

281

Seperti yang ditunjukkan orang lain, setInterval dan setTimeout akan melakukan triknya. Saya ingin menyoroti teknik yang sedikit lebih maju yang saya pelajari dari video luar biasa ini oleh Paul Irish: http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

Untuk tugas berkala yang mungkin memakan waktu lebih lama dari interval pengulangan (seperti permintaan HTTP pada koneksi yang lambat) sebaiknya tidak digunakan setInterval(). Jika permintaan pertama belum selesai dan Anda memulai yang lain, Anda bisa berakhir dalam situasi di mana Anda memiliki beberapa permintaan yang menghabiskan sumber daya bersama dan membuat satu sama lain kelaparan. Anda dapat menghindari masalah ini dengan menunggu untuk menjadwalkan permintaan berikutnya hingga yang terakhir selesai:

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

Untuk kesederhanaan, saya menggunakan panggilan balik sukses untuk penjadwalan. Sisi bawah ini adalah satu permintaan yang gagal akan menghentikan pembaruan. Untuk menghindari hal ini, Anda dapat menggunakan callback lengkap sebagai gantinya:

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

— menarik
sumber

3

Bukankah ini seperti pemanggilan fungsi rekursif? Jika ya, lalu apakah boleh membiarkannya berjalan dalam jangka waktu yang lama terus menerus, karena rekursif? bisa menjadi kasus rekursi tak terbatas selama ajax terus berhasil mengeksekusi

— Rahul Dole

1

Selain itu, jika Anda menggunakan setTimeout, apakah ada cara untuk menghentikan utas ini dari luar blok kode ini? Seperti di setInterval, Anda cukup memanggil clearInterval ().

— Rahul Dole

16

@RahulDole itu pertanyaan yang bagus tetapi tidak rekursif. Ini tidak dipanggil langsung dari fungsi pekerja, jadi tumpukan tidak akan terus bertambah. Untuk poin kedua Anda, periksa dokumen untuk setTimeout () dan Anda akan melihatnya mengembalikan id numerik yang bisa diteruskan ke clearTimeout ().

— menarik

7

@RahulDole jika Anda menggunakan Chrome, coba cari-cari console.trace () untuk melihat tumpukan panggilan fungsi. Fungsi yang dipanggil oleh setTimeout () akan memiliki tumpukan yang sangat pendek dan pasti tidak akan menyertakan fungsi yang disebut setTimeout ().

— menarik

1

@Anupal baru saja membuat pertanyaan baru.

— menarik

34

Ya, Anda dapat menggunakan setTimeout()metode JavaScript atau setInterval()metode untuk memanggil kode yang ingin Anda jalankan. Inilah cara Anda melakukannya dengan 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
sumber

1

Gunakan hanya setTimeout (executeQuery, 5000); bukannya setTimeout ('executionQuery ()', 5000); - itu lebih pendek dan lebih cepat.

— rsp

4

Anda dapat menggunakan setTimeoutatau setInterval.

Perbedaannya adalah - setTimeout memicu fungsi Anda hanya sekali, lalu Anda harus menyetelnya lagi. setInterval terus memicu ekspresi lagi dan lagi, kecuali Anda menyuruhnya berhenti

— Puneet
sumber

1

Saya mencoba kode di bawah ini,

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

Ini tidak berfungsi seperti yang diharapkan untuk interval yang ditentukan, halaman tidak dimuat sepenuhnya dan fungsi dipanggil terus menerus. Lebih baik menelepon ke setTimeout(executeQuery, 5000);luar executeQuery()dalam fungsi terpisah seperti di bawah ini,

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

Ini bekerja persis seperti yang diinginkan.

— Srihari
sumber