轻松解决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中eval函数的使用方法与示例
Apr 09 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
搭建vue开发环境
Jul 19 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php Smarty 字符比较代码
2011/02/27 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
Django数据库类库MySQLdb使用详解
2019/04/28 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Python 存取npy格式数据实例
2020/07/01 Python
django和flask哪个值得研究学习
2020/07/31 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
品德评语大全
2014/05/05 职场文书
水电工程师岗位职责
2015/02/13 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS