轻松解决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 相关文章推荐
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
微信小程序实现笑脸评分功能
Nov 03 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+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
Python 如何创建一个线程池
2020/07/28 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
如何用Python徒手写线性回归
2021/01/25 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
工伤私了协议书范本
2014/11/24 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
浅谈MySQL中的六种日志
2022/03/23 MySQL