轻松解决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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
Javascript玩转继承(一)
May 08 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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截取中文字符串的问题
2006/07/12 PHP
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
简单实现js浮动框
2016/12/13 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
python zip文件 压缩
2008/12/24 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
Python用input输入列表的实例代码
2020/02/07 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
优秀中专生推荐信
2013/11/17 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
表扬稿范文
2015/01/17 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android