如何阻止我的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倒计时？

回答

相关问题