轻松解决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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
如何实现动态删除javascript函数
May 27 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
Javascript 构造函数详解
Oct 22 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 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
在字符串中把网址改成超级链接
2006/10/09 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
简单实现PHP留言板功能
2016/12/21 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
centos系统升级python 2.7.3
2014/07/03 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python断言assert的用法代码解析
2018/02/03 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
解决python3输入的坑——input()
2020/12/05 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
Python 键盘事件详解
2021/11/11 Python