问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

计时器没有清除干净？

头像
undefind_5
    1.5k1298133

    我做了一个倒计时计时器，达到的效果是点击元素，触发计时器，倒计时5秒后，清除计时器。再次点击，再次触发计时器（这一步还没有测试），问题在上一步——清除计时器后，计时器仍然还是运作，代码如下：
    var time=5;//初始化倒计时秒数

    var timer;//定义计时器
yanz.onclick=function(){
    var timer=window.setInterval("daoshu()",1000);//触发
}
function daoshu(){
    yanz.style.fontSize="12px";
    yanz.innerHTML="短信已發送，"+time+"s內有效";
    time--;//倒计时
    if(time<=0){//计时完毕
        Stop();//清除计时器
        yanz.style.fontSize="18px";
        yanz.innerHTML="點擊獲取短信驗證碼";
    }
    console.log(time);//这里能看出，该计时器并未被清除，任然在运作
}
function Stop(){
    window.clearInterval(timer);//清除计时器
}
大神指点一下，问题出在哪里了？
    javascript
    阅读 8.2k
    5 个回答
    得票最新
    头像
    小小小菜鸟
      6551210
      ✓ 已被采纳
      var timer;//定义计时器
yanz.onclick=function(){
    var timer=window.setInterval("daoshu()",1000);//错误就在这里，你又定义了一次timer
}

      倒计时参考代码

      <html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <title>test</title>
</head>
<body>
    <a id="jwtest" href="javascript:;">重新发送</a>
</body>
<script type="text/javascript">
$(function(){
    $("#jwtest").click(function(){
        time($(this));
    });
});
var wait=60;
function time(o) {
    if (wait == 0) { 
        o.html("重新发送");
        wait = 60;
    } else { 
        o.html("重新发送("+wait+")");
        wait--; 
        setTimeout(function() {
            time(o);
        },
        1000);
    } 
}
</script>
</html>
      头像
      不爱吃西红柿的鱼
        8.2k21124
        function roll(callback, time, delay) {
  time = ~~time || 1;
  delay = ~~delay || 0;
  return run();

  function run() {
    setTimeout(function() {
      if (Object.prototype.toString.call(callback) === '[object Function]') callback(time);
      time--;
      if (time > 0) return run();
    }, delay);
  }
}

        用法

        roll((i) => {
  console.log(`短信已發送，${i}s內有效`);
}, 60, 1000);
        头像
        justcoding
          52923958
          yanz.onclick=function(){
    var timer=window.setInterval("daoshu()",1000);//触发
}

          这是的timer永远是个局部变量，stop里面清除的是全局的timer，然后全局的timer始终是null，在跑的始终是局部的timer，所以你应该知道错误在哪了

          头像
          Nine
            1.1k615
            var timer;//定义计时器
yanz.onclick=function(){
    var timer=window.setInterval("daoshu()",1000);//触发
}

            改成

            var timer;//定义计时器
yanz.onclick=function(){
    timer=window.setInterval("daoshu()",1000);//触发
}

            因为在这个匿名函数里面又重新申明了一个变量，所以window对象下的timer是null，onlcick里面的timer匿名函数内部的一个变量，两个不在共同层级，所以你要去掉var

            此外，建议题主在设置timer之前先把timer清掉，防止二次点击，产生加速的情况

            var timer;//定义计时器
yanz.onclick=function(){
    Shop();
    timer=window.setInterval("daoshu()",1000);//触发
}
            头像
            marShuang
              275

              var timer;//定义计时器
              yanz.onclick=function(){
              var timer=window.setInterval("daoshu()",1000);//触发
              }
              timer定义了两次

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题