js设置定时器和清除定时器
Posted 陈由梅
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js设置定时器和清除定时器相关的知识,希望对你有一定的参考价值。
一、前言
在前端,我们有很多功能需要用到定时器。譬如轮询,譬如定时关闭弹框,譬如实现秒表,譬如一段时间后跳转页面等等。因此,我们需要掌握定时器的用法。
二、设置定时器
目前window对象提供有两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval()。
其中setInterval()的作用是:使一段代码每过指定时间就运行一次;常用于轮询。
setInterval(function(){ console.log("这是一个setInterval定时器!"); }, 1000);//1000ms=1s,设定的代码循环运行时的间隔时间,单位为ms
而setTimeout()的作用是:使一段代码在指定时间后运行;常用于一次性定时器及轮询。
setTimeout(function(){ console.log("这是一个setTimeout定时器!"); }, 1000);//1000ms=1s,设定的代码等待运行的时间,单位为ms
三、定时器的缺陷
1.定时器最大的优点,同时也是它最容易出错的一点:定时器所有任务都是由同一个线程来调度。
正是因此,定时器简单易用。同时这也导致了定时器所有任务都是串行执行的,同一时间只能有一个任务在执行,前一个任务的延迟或异常都将会影响到之后的任务,即定时器的重叠。
2.定时器不会被自动销毁,即它所占内存无法被自动回收。如果不手动清除定时器,它会一直占用内存资源。更可怕的是,一旦使用定时器进行轮询,定时器所占的内存资源将会不断上升,若与定时器重叠问题一起出现,常导致页面卡顿。
所以,我们必须学会清除定时器。
四、清除定时器
定时器在调用时,都会返回一个整形的数字,该数字代表定时器的序号,即第多少个定时器,我们可以利用定时器的序号对定时器进行清除。
因此在清除定时器时,我们常在设置定时器时,定义一个变量来记录定时器返回的定时器序号,然后在定时器完成后,调用该序号清除对应定时器。
目前有两个方法来清除定时器,分别对应两种定时器的方法。
其一是clearInterval(obj),对应setInterval()定时器;
var intervalBox = setInterval(function(){ console.log(intervalBox);//打印interval定时器,查看interval定时器效果 }, 1000); clearInterval(intervalBox);//清除interval定时器
其二是clearTimeout(obj),对应setTimeout()定时器;
var timeoutBox = setTimeout(function(){ console.log(timeoutBox);//打印interval定时器,查看interval定时器效果 }, 1000); clearTimeout(timeoutBox);//清除timeout定时器
五、总结示例
为实现相应功能,定时器不可或缺性,但是若不规范使用定时器,将会造成巨大困扰,轻则内存资源被严重占用,页面卡顿,重则逻辑断裂,出现重大bug。因此我们需要对定时器规范使用,及时清除。
我对定时器的使用有八字总结:随时使用,即时清除。
简单来说,每设置一个定时器,都要对应清除,示例代码如下:
<html> <head> <meta charset="utf-8"> <title>定时器</title> </head> <body> <button onclick="startInterval()">开始Interval</button> <button onclick="stopInterval()">停止Interval</button> <button onclick="startTimeout()">正常Timeout定时器</button> <button onclick="startTimeoutTwo()">循环的Timeout定时器</button> <button onclick="stopTimeout()">停止Timeout</button> <script> var intervalBox;//interval定时器存储器 //设置interval定时器 function startInterval() { clearInterval(intervalBox);//初始化interval定时器,防止定时器重叠 intervalBox = setInterval(function(){//设置interval定时器 console.log(intervalBox);//打印interval定时器,查看interval定时器效果 }, 1000);//定时器间隔时间1000ms } //结束interval定时器 function stopInterval() { clearInterval(intervalBox);//清除interval定时器 } var timeoutBox;//timeout定时器存储器 //设置正常的timeout定时器 function startTimeout() { clearTimeout(timeoutBox);//初始化timeout定时器,防止定时器重叠 timeoutBox = setTimeout(function(){//设置timeout定时器 console.log(timeoutBox);//打印timeout定时器,查看timeout定时器效果 clearTimeout(timeoutBox);//清除当前timeout定时器,timeout定时器只运行一次代码,直接清掉它 // location.href="timer.html";//一段时间后跳转页面是setTimeout的常用场景之一 }, 1000); } //设置循环的timeout定时器 function startTimeoutTwo() { clearTimeout(timeoutBox);//初始化timeout定时器,防止定时器重叠 timeoutBox = setTimeout(function(){ console.log(timeoutBox);//打印timeout定时器,查看timeout定时器效果 startTimeoutTwo();//循环调用函数自身,以达到循环的效果 }, 1000); } // 结束循环的timeout定时器 function stopTimeout() { clearTimeout(timeoutBox); } </script> </body> </html>
以上是关于js设置定时器和清除定时器的主要内容,如果未能解决你的问题,请参考以下文章