วิธีการส่งคำขอ AJAX เป็นระยะ ๆ ?

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

สคริปต์นี้จะโหลดซ้ำหรือรีเฟรชหน้าทุกๆ 5 วินาที แต่ฉันต้องการทำโดยใช้ jQuery และ AJAX call เป็นไปได้ไหม?

ดังที่คนอื่น ๆ ได้ชี้ให้เห็นว่า setInterval และ setTimeout จะทำเคล็ดลับ ฉันต้องการเน้นเทคนิคขั้นสูงอีกเล็กน้อยที่ฉันได้เรียนรู้จากวิดีโอที่ยอดเยี่ยมนี้โดย Paul Irish: http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

สำหรับงานระยะที่อาจจบลงด้วยการใช้เวลานานกว่าช่วงเวลาการทำซ้ำ (เช่นการร้องขอ HTTP ในการเชื่อมต่อช้า) setInterval()มันเป็นเรื่องที่ดีที่สุดที่จะไม่ใช้ หากคำขอแรกยังไม่เสร็จสมบูรณ์และคุณเริ่มต้นใหม่คุณอาจจบลงในสถานการณ์ที่คุณมีคำขอหลายรายการที่ใช้ทรัพยากรร่วมกันและอดอาหารซึ่งกันและกัน คุณสามารถหลีกเลี่ยงปัญหานี้ได้โดยรอกำหนดเวลาคำขอถัดไปจนกว่าคำขอสุดท้ายจะเสร็จสิ้น:

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

เพื่อความเรียบง่ายฉันใช้การเรียกกลับสำเร็จสำหรับการตั้งเวลา ข้อเสียคือคำขอที่ล้มเหลวจะหยุดการอัปเดต เพื่อหลีกเลี่ยงปัญหานี้คุณสามารถใช้การโทรกลับแบบสมบูรณ์แทน:

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

ได้คุณสามารถใช้setTimeout()วิธีJavaScript หรือsetInterval()วิธีการเรียกใช้โค้ดที่คุณต้องการเรียกใช้ นี่คือวิธีที่คุณสามารถทำได้ด้วย 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);
});

คุณสามารถใช้setTimeoutหรือsetInterval.

ความแตกต่างคือ - setTimeout เรียกใช้ฟังก์ชันของคุณเพียงครั้งเดียวจากนั้นคุณต้องตั้งค่าอีกครั้ง setInterval ยังคงเรียกใช้นิพจน์ซ้ำแล้วซ้ำอีกเว้นแต่คุณจะบอกให้หยุด

ฉันลองใช้รหัสด้านล่าง

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

สิ่งนี้ไม่ได้ผลตามที่คาดไว้สำหรับช่วงเวลาที่ระบุหน้าเว็บไม่โหลดอย่างสมบูรณ์และมีการเรียกใช้ฟังก์ชันอย่างต่อเนื่อง ดีกว่าที่จะโทรออกไปsetTimeout(executeQuery, 5000);ข้างนอกexecuteQuery()ในฟังก์ชั่นแยกต่างหากดังต่อไปนี้

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

สิ่งนี้ได้ผลตามที่ตั้งใจไว้