时间戳

首页 > 解决方案 > Ajax 中的计时器 - 抢占

javascript - Ajax 中的计时器 - 抢占

问题描述

所以这件事在我的脑海中持续了很长时间，无论是在 AJAx 中给出的计时器之后它必须发送另一个请求，如果它小于请求的文件完成其操作所花费的实际时间怎么办。

例如，考虑下面的代码，

<div class="item"></div>
<script>
function timeLeft() {
  $(".item").each(function() {
    $this = $(this);
    var dataString = {s: "//some data", st: "<?echo $stamp?>"};
    $.ajaxSetup({cache:false});
    $.ajax({
      type: "POST",
      url: "get_content_home.php",
      dataType: "html",
      data: dataString, 
      success: function(result) {
        $this.html(result);
      }
    });
  });
}
window.setInterval(function() {
  timeLeft();
}, 100);
</script>

此处给出的计时器为 100 毫秒，每 100 米将请求一次文件 get_content_home.php。如果 get_content_home.php 需要 500 毫秒来完成它的操作怎么办。get_content_home.php 会被抢占并再次被请求吗？还是计时器会等待并自行延迟。

提前致谢。

标签： javascriptajax

解决方案

由于 ajax 请求处于循环状态，这比您想象的要糟糕。

实际上会发生的是：

  1. window.setInterval称呼timeLeft

  2. timeLeftget_content_home.php为每个.item元素调用一次 AJAX 请求。

  3. 假设一个 AJAX 调用需要 500 毫秒，您将在第一个 AJAX 请求返回之前执行五次（因此number of .item在一个结果之前进行 5 次调用）。

要停止这种疯狂行为，请将您的 AJAX 调用放在循环之外，并将其放入window.setIntervalAJAX 回调函数中：

$.ajax({
  type: "POST",
  url: "get_content_home.php",
  dataType: "html",
  data: dataString, 
  success: function(result) {
    $this.html(result);
    window.setTimeOut(function() {
      timeLeft();
    }, 100);
  }
});

并在开始时只调用timeLeft();一次。

推荐阅读