javascript - Ajax 中的计时器 - 抢占

Question

这个问题已经有答案了:

Ajax too slow - Recursion (1 个回答)

已关闭 5 年前。

所以这件事在我脑海里思考了很长时间，是否 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>

这里给出的计时器是100ms，每100m就会请求一次文件get_content_home.php。如果 get_content_home.php 需要 500 毫秒才能完成其操作怎么办？ get_content_home.php 会被抢占并再次请求吗？或者计时器会等待并自行延迟。

提前致谢。

Answer 1

这比你想象的更糟糕，因为 ajax 请求处于循环中。

实际上会发生的是:

1. window.setInterval 调用 timeLeft

2. timeLeft 对每个 .item 元素调用一次对 get_content_home.php 的 AJAX 请求。

   <

3. 假设一次 AJAX 调用需要 500 毫秒，您将在第一个 AJAX 请求返回某些内容之前执行此操作五次(因此在一个结果之前调用了 5 次.item 次数)。

要阻止这种疯狂行为，请将 AJAX 调用置于循环之外，并将 window.setInterval 放入 AJAX 回调函数中:

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

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