0

product.htmlAJAXを使用して（ボタンをクリックして）別のHTMLファイルのdivに挿入されたHTMLファイルがあります。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に挿入されます。タイマーは正常に動作します。しかし、ボタンをもう一度クリックすると、タイマーのコピーが 2 つ実行されているようです。もう一度クリックすると、実行中のタイマーの複数のコピーが表示されます。displayTime非常に多くのタイマーが div を更新しようとしているため、div がちらつきます。私の質問: 新しいタイマーを実行する必要がないように、既にタイマーが実行されているかどうかを確認するにはどうすればよいですか。または、古いものを停止するにはどうすればよいですか？

4

1 に答える 1

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

});
于 2013-03-29T10:57:02.577 に答える