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

解决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定时器越走越快的问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • AngularJs定时器$interval 和 $timeout详解

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后被取消,如果迭代次数未定义,则无限制的执行.通知的值将是运行的迭代次数.取消一个间隔,调用$intreval.cancel(promise). 备注:当你执行完这项服务后应该把它销毁.特别是当controller或者directive元素被销毁时而$interval未被销毁.你应该考虑到在适当的时候

  • JavaScript定时器setTimeout()和setInterval()详解

    本文实例为大家分享了JavaScript定时器的具体方法,供大家参考,具体内容如下 1. 超时调用setTimeout() 顾名思义,超时调用的意思就是在一段实际之后调用(在执行代码之前要等待多少毫秒) setTimeout()他可以接收两个参数: 1.要执行的代码或函数 2.毫秒(在执行代码之前要等待多少毫秒) function test(){ alert("孙悟空"); } setTimeout(test,2000); //2s后弹出 "孙悟空" clearTi

  • javascript定时器取消定时器及优化方法

    javascript定时器取消定时器及js定时器优化方法 通常用的方法: 启动定时器: window.setInterval(Method,Time) Method是定时调用的js方法 Time是间隔时间,单位是毫秒 取消定时器: clearInterval(Method); 那么问题来了.用 clearInterval(timerid);来清除,往往不能马上停止,用什么方法比较好解决? 优化方案如下 var timeout = false; //启动及关闭按钮 function time()

  • AngualrJs清除定时器遇到的坑

    angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会影响系统的性能. 我在angular里边用原生的方法window.onunload方法竟然不管用,所以只好用angular自己的方法$destroy,这页面跳转,DOM结构发生变化是都能清除定时器 var timer = setInterval(function(){ $scope.$apply(function(){ //这里是想要定

  • js定时器实现倒计时效果

    js定时器实现倒计时效果

    本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下 日期函数 倒计时 =  用 将来的时间  -   现在的时间 问题:将来时间 距离 1970 毫秒数   -     现在距离 1970年1 用将来的毫秒数 -  现在的毫秒数   不断转换就可以了 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t

  • Angular.js中定时器循环的3种方法总结

    本文主要设计定时器的三种循环,模板自配,下面分享给大家供大家参考,具体如下: 1.$interlval实现,比较简单和原生js的setInterval比较相似 var app = angular.module('myApp',[]); app.run(function($rootScope , $interval){ var img=["http://hdn.xnimg.cn/photos/hdn321/20130612/2235/h_main_NNN4_e80a000007df111a.jpg

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

    解决JavaScript定时器越走越快的问题 之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的问题,在这里记录一下. (setinterval)多次初始化 使用js定时器(setinterval)首要的问题就是要记得清除,即调用(clearInterval)方法,由于没有使用定时器的经验,我一开始是没有清除定时器,程序每一次初始化的时候都调用一次定时器,之前的定时器实例没有被

  • 解决keras backend 越跑越慢问题

    Keras运行迭代一定代数以后,速度越来越慢,经检查是因为在循环迭代过程中增加了新的计算节点,导致计算节点越来越多,内存被占用完,速度变慢. 判断是否在循环迭代过程中增加了新的计算节点,可以用下面的语句: tf.Graph.finalize() 如果增加了新的计算节点,就会报错,如果没有报错,说明没有增加计算节点. 补充知识:win10下pytorch,tensorflow,keras+tf速度对比 采用GitHub上的代码 运行类似vgg模型,在cifar10上训练,结果朋友torch与ten

  • JavaScript该如何学习 怎样轻松学习JavaScript

    JavaScript该如何学习 怎样轻松学习JavaScript

    js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径.我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路".js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库.对象库就一大堆. C:混合多种编程思想.它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样

  • 理解javascript定时器中的setTimeout与setInterval

    理解javascript定时器中的setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 setTimeout: var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); var timeoutID = window.setTimeout(code, delay); timeoutID 是该延时操作的数字ID,

  • javascript 定时器工作原理分析

    javascript 定时器工作原理分析

    setTimeout() MDN对 setTimeout 的定义为: 在指定的延迟时间之后调用一个函数或执行一个代码片段. 语法 setTimeout 的语法非常简单,第一个参数为回调函数,第二个参数为延时的时间.函数返回一个数值类型的ID唯一标示符,此ID可以用作 clearTimeout 的参数来取消定时器: var timeoutID = window.setTimeout(code, delay); IE0+ 还支持回调参数的传入: var timeoutID = window.setT

  • javascript定时器完整实例

    本文实例讲述了javascript定时器完整实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&qu

  • JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)

    废话不多说了,直接给大家贴代码了. // 每隔五秒定时刷新当前窗口 setTimeout("self.location.reload();",5000); //js 定时关闭窗口(ie和FF中测试过) //6秒后自动关闭当前窗口 setTimeout("window.opener=null;window.close()",6000); 下面给大家介绍下javascript定时器使用 使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方

  • 轻松实现javascript图片轮播特效

    轻松实现javascript图片轮播特效

    本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 <body> <div class="dota"> <ul id="content"> <li><a href="#"><img src="images/1.jpg"/></a>&l

随机推荐