如下简单案例,实现一个倒计时
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button>倒计时</button>还剩<span>60</span>
<script type="text/javascript">
var time = document.querySelector('span');
var btn = document.querySelector('button');
var s = 60;
btn.onclick=function(){
setInterval(function(){
s--
time.innerText=s
},1000);
}
</script>
</body>
</html>
当我们多次点击按钮时会使定时器加快
根本原因是点击按钮时触发了多次定时器。 我们只需要在触发函数时进行判断,如果存在定时器则清除否则才运行 改进一下刚才的代码
...
var timer = null;
btn.onclick=function(){
if(timer){
clearInterval(timer)
timer = null
}
timer = setInterval(function(){
s--
time.innerText=s
},1000);
}
解决定时器加快问题