Bagaimana cara mengaktifkan permintaan AJAX secara berkala?

<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?

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

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

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

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.