2013-03-29 152 views
0

我有被插入到另一个HTML文件中使用AJAX(通过点击按钮)一个div的HTML文件product.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的按钮。定时器运行正常。但是,当我再次单击该按钮时,显然有两个计时器正在运行。如果再次点击,则会有多个计时器正在运行。 displayTime div闪烁,因为很多定时器试图更新它。我的问题:我如何检查是否已有计时器正在运行,以便不需要运行新计时器。或者我该如何阻止旧的?

回答

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

}); 
+0

明白了,非常感谢。 –

相关问题