javascript - 计时器没有清除干净？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 计时器没有清除干净？

巴扎黑 2017-04-11 13:31:51

[JavaScript讨论组]

530

我做了一个倒计时计时器，达到的效果是点击元素，触发计时器，倒计时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);//清除计时器
}
大神指点一下，问题出在哪里了？

巴扎黑

全部回复(5)

高洛峰2017-04-11 13:33:51 5楼

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>

赞 +0

添加回复

PHP中文网2017-04-11 13:33:51 4楼

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

赞 +0

添加回复

ringa_lee2017-04-11 13:33:51 3楼

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

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

赞 +0

添加回复

迷茫2017-04-11 13:33:51 2楼

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);//触发
}

赞 +0

添加回复

ringa_lee2017-04-11 13:33:51 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>