Cách kích hoạt yêu cầu AJAX Định kỳ?

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

Tập lệnh này tải lại hoặc làm mới trang sau mỗi 5 giây. Nhưng tôi muốn làm điều đó bằng cách gọi jQuery và AJAX. Có khả thi không?

Như những người khác đã chỉ ra setInterval và setTimeout sẽ thực hiện thủ thuật. Tôi muốn làm nổi bật kỹ thuật nâng cao hơn một chút mà tôi học được từ video tuyệt vời này của Paul Irish: http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

Đối với các tác vụ định kỳ có thể mất nhiều thời gian hơn khoảng thời gian lặp lại (như yêu cầu HTTP trên kết nối chậm), tốt nhất bạn không nên sử dụng setInterval(). Nếu yêu cầu đầu tiên chưa hoàn thành và bạn bắt đầu một yêu cầu khác, bạn có thể rơi vào tình huống có nhiều yêu cầu tiêu thụ tài nguyên được chia sẻ và bỏ đói lẫn nhau. Bạn có thể tránh sự cố này bằng cách chờ lên lịch yêu cầu tiếp theo cho đến khi yêu cầu cuối cùng hoàn thành:

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

Để đơn giản, tôi đã sử dụng lệnh gọi lại thành công để lập lịch. Mặt trái của điều này là một yêu cầu không thành công sẽ dừng cập nhật. Để tránh điều này, bạn có thể sử dụng lệnh gọi lại hoàn chỉnh để thay thế:

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

Có, bạn có thể sử dụng setTimeout()phương pháp hoặc phương thức JavaScript setInterval()để gọi mã mà bạn muốn chạy. Đây là cách bạn có thể thực hiện với 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);
});

Bạn có thể sử dụng setTimeouthoặc setInterval.

Sự khác biệt là - setTimeout chỉ kích hoạt chức năng của bạn một lần và sau đó bạn phải thiết lập lại. setInterval tiếp tục kích hoạt biểu thức lặp đi lặp lại, trừ khi bạn yêu cầu nó dừng lại

Tôi đã thử mã bên dưới,

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

Điều này không hoạt động như mong đợi trong khoảng thời gian được chỉ định, trang không tải hoàn toàn và hàm được gọi liên tục. Tốt hơn nên gọi setTimeout(executeQuery, 5000);bên ngoài executeQuery()trong một chức năng riêng biệt như bên dưới,

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

Điều này hoạt động chính xác như dự định.