轻松解决JavaScript定时器越走越快的问题


Posted in Javascript onMay 13, 2019

解决JavaScript定时器越走越快的问题

之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的问题,在这里记录一下。

(setinterval)多次初始化

使用js定时器(setinterval)首要的问题就是要记得清除,即调用(clearInterval)方法,由于没有使用定时器的经验,我一开始是没有清除定时器,程序每一次初始化的时候都调用一次定时器,之前的定时器实例没有被销毁,新的定时器又开始执行,就会出现1s变0.5s,0.5s变0.25秒的情况,从观感上来看就是定时器“越走越快”了。

这个过程可以用几行简单的代码模拟一下

<label id="lblShowNum"></label>
<input type="button" id="btnStart" value="启动" />
<input type="button" id="btnClear" value="清除" />
window.onload = function () {
  var i = 0;
  var timer;
  document.getElementById("btnStart").onclick = function () {    
    timer = setInterval(
      function () {
        i++;
        document.getElementById("lblShowNum").innerText = i;
      }, 1000);
  }
  document.getElementById("btnClear").onclick = function () {
    clearInterval(timer);
  }
}

如果只点击一次“启动”按钮,定时器会正常运行,点击“清除”按钮就可以暂停定时器,但是每一次点击“启动”按钮,都会提高数字的增速,而清除功能也不再起作用,这就是因为在每一次点击“启动”的时候都有新的定时器被创建。

清除(clearInterval)的失效

但为什么清除的方法会失效呢?在代码中我们定义了一个变量timer去接收定时器,对timer操作是不是就能清除定时器了呢?并不是是这样,首先看下setinterval()返回值的说明

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

这里可以看出这个返回值并不是定时器本身,它只是一个用于传递的返回值,如果想当然的把它当做定时器,以为每次初始化赋值就是新的定时器就错了,我最开始就是这样想的。

每一次给timer赋值都是在创建新的定时器对象,而且之前的定时器也并没有被清除,所以这时候调用clearInterval(timer)清除的只是最后一个被创建的定时器对象罢了。

使用上面的例子就可以简单的用肉眼观察效果,先点击一次启动观察速度,再点击第二次,会看到速度有明显的提升,这时候使用清除功能,速度就会回到第一次启动的状态,但是多次点击清除是没有用的,如果想看准确的结果可以将时间打印出来进行比较。

解决方法

看到这里,答案呼之欲出了,很简单,在每次初始化定时器之前先执行清除操作,保证之前的定时器被清除了就不会发生越走越快的情况,所以其实并不是定时器越走越快,而是有多个定时器在执行,定时器里面的程序执行的频率提高了。

window.onload = function () {
  var i = 0;
  var timer;
  document.getElementById("btnStart").onclick = function () {    
    clearInterval(timer); 
    timer = setInterval(
      function () {
        i++;
        document.getElementById("lblShowNum").innerText = i;
      }, 1000);
  }
  document.getElementById("btnClear").onclick = function () {
    clearInterval(timer);
  }
}

总结

以上所述是小编给大家介绍的轻松解决JavaScript定时器越走越快的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 #Javascript
jsonp跨域获取百度联想词的方法分析
May 13 #Javascript
基于Fixed定位的框选功能的实现代码
May 13 #Javascript
JQuery事件委托原理与用法实例分析
May 13 #jQuery
使用原生js编写一个简单的框选功能方法
May 13 #Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 #Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
You might like
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP与以太坊交互详解
2018/08/24 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
python求素数示例分享
2014/02/16 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
python中assert用法实例分析
2015/04/30 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
Python 防止死锁的方法
2020/07/29 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
物流合作计划书
2014/01/10 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
2014年财政局工作总结
2014/12/09 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
初中军训感言
2015/08/01 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技