如何阻止我的JavaScript倒計時？

如何在countdown = 0時停止我的javascript函數？如何阻止我的JavaScript倒計時？

JS：

var settimmer = 0; 
$(function(){ 
    window.setInterval(function() { 
     var timeCounter = $("b[id=show-time]").html(); 
     var updateTime = eval(timeCounter)- eval(1); 
     $("b[id=show-time]").html(updateTime); 
    }, 1000); 
});

HTML：

<b id="show-time">20</b>

來源

2012-03-30 Qua

它的工作原理是這樣的：

// Activate timer 
var iv = window.setInterval(...); 

// Deactive timer 
window.clearInterval(iv);

而且你應該使用parseInt函數（）代替eval（）函數：

$(function() { 
    // Read the start value once and store it in a variable 
    var timeCounter = parseInt($("b[id=show-time]").text()); 

    // Active the counter 
    var iv = window.setInterval(function() { 
     // Decrement by one and write back into the document 
     $("b[id=show-time]").text(--timeCounter); 

     // Check if counter == 0 -> stop counting 
     if (0 == timeCounter) { 
      window.clearInterval(iv); 
      // ...do whatever else needs to be done when counter == 0 .. 
     } 
    }, 1000); 
});

來源

2012-03-30 18:55:10 Niko

除非出於某種瘋狂的原因''setInterval''和'clearInterval'在您的代碼中被遮擋，否則顯式引用窗口是不必要的。 – 2012-03-30 18:56:40

舉例：

var i = 0, 
    pid = setInterval(function() { 
     if (++i > 10) 
      clearInterval(pid); 
    }, 1000);

根據你想要什麼，你的代碼...

$(function() { 
    var el = document.getElementById('show-time'), 
     pid = setInterval(function() { 
      // (s - i) coerces s to Number 
      var t = el.innerHTML - 1; 
      el.innerHTML = t; 
      if (t < 1) 
       clearInterval(pid); 
     }, 1000); 
});

來源

2012-03-30 18:56:07

爲什麼要將jQuery與花哨的JavaScript合併？ :-P – Neal 2012-03-30 19:04:11

這是很容易！當您撥打setInterval時，它會返回一個ID，以便您稍後可以銷燬該時間間隔。要摧毀它，你必須使用clearInterval(id)，瞧！

來源

2012-03-30 18:56:11

對於一件事刪除那些eval s。他們什麼都不做。

然後你所要做的就是清零定時器。

$(function(){ 
     var timer = setInterval(function() { 
      var timeCounter = parseInt($("b[id=show-time]").text()); 
      $("b[id=show-time]").text(--timeCounter); // remove one 
      if(!timeCounter) clearInterval(timer); 
     }, 1000); 
});

來源

2012-03-30 18:56:25 Neal

我想你錯過了'！'那裏... – Niko 2012-03-30 19:01:36

啊啊是的，謝謝@Niko :-) – Neal 2012-03-30 19:02:06

請記住，JS的時機不會100％準確。

粘貼代碼或下面看到的小提琴：http://jsfiddle.net/raHrm/

<script type="text/javascript"> 
$(function(){ 

var settimmer = 0, 
    timeCounter = $("#show-time").html(), 
    updateTime = timeCounter; 

(function countDown() { 
    timeCounter = $("#show-time").html(); 
    updateTime = parseInt(timeCounter)-1; 
    $("#show-time").html(updateTime); 
    if (updateTime) { 
     setTimeout(countDown, 1000); 
    } 
})(); 

}); 
</script>

來源

2012-03-30 19:03:44 mikevoermans

設置計時器到一個變量，然後按順序結束循環使用clearInterval。在HTML

$(function(){ 
    var elem=$('strong[id="show-time"]'),settimmer=0,updateTime,t; 
    t=window.setInterval(function() { 
     updateTime=parseFloat(elem.html(),10)-1; 
     if(updateTime==0) { 
      window.clearInterval(t); 
      elem.html('Done!'); 
     } else { 
      elem.html(updateTime); 
     } 
    },1000); 
});

然後：至於捕結束後，用一個簡單的條件

<strong id="show-time">20</strong>

的<b>標籤貶值，儘量避免使用它。此外，沒有理由eval()您從元素獲得的HTML;一個簡單的parseFloat()工作得很好。

來源

2012-03-30 19:09:48 faino

如何阻止我的JavaScript倒計時？

回答

相關問題