jquery - AJAX插入的定时器程序的多个副本：如何确保只有一个副本在运行

Question

我有一个 HTML 文件product.html，它使用 AJAX（通过单击按钮）插入到另一个 HTML 文件中的 div 中。有一个定时器product.html如下：

product.html：

<!-- HTML stuff -->
...

Bid time of the product: <div id="displayTime"></div>

...
<!-- HTML stuff -->


<div id="testChange">
<script> 
$(document).ready(function() {

  function updateTime() {
    var newContent = $("#testChange").html();
    if (newContent != oldContent) {  // If the content of "testChange" changes, stop the timer
      return;
    }
    timeStr = ...   // prepare the time for display
    $("#displayTime").html(timeStr);
    setTimeout(updateTime, 1000);
  }

  function startUpdatingTime() {
    oldContent = $("#testChange").html();
    updateTime();
  }

 startUpdatingTime();

</script>
</div>

当我单击按钮时，文件product.html被 AJAX 插入到另一个 HTML 的 div 中。计时器运行正常。但是，当我再次单击该按钮时，显然有两个计时器正在运行。如果我再次单击，将运行多个计时器副本。div 闪烁，displayTime因为有很多计时器试图更新它。我的问题：我如何检查是否已经有一个计时器正在运行，这样就不需要运行一个新的了。或者我如何阻止旧的？

Answer 1

只需使用clearTimeout如下所示：

$(document).ready(function() {

  var timeout, oldContent;

  function updateTime() {
    var newContent = $("#testChange").html();
    if (newContent != oldContent) {  // If the content of "testChange" changes, stop the timer
      return;
    }
    timeStr = ...   // prepare the time for display
    $("#displayTime").html(timeStr);

    if (timeout){
       window.clearTimeout(timeout);
    }
    timeout = window.setTimeout(updateTime, 1000);
  }

  function startUpdatingTime() {
    oldContent = $("#testChange").html();
    updateTime();
  }

 startUpdatingTime();

});