html清空计时器,js设置定时器和清除定时器

一、前言

在前端，我们有很多功能需要用到定时器。譬如轮询，譬如定时关闭弹框，譬如实现秒表，譬如一段时间后跳转页面等等。因此，我们需要掌握定时器的用法。

二、设置定时器

目前window对象提供有两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval()。

其中setInterval()的作用是：使一段代码每过指定时间就运行一次；常用于轮询。

setInterval(function(){

console.log("这是一个setInterval定时器！");

}, 1000);//1000ms=1s，设定的代码循环运行时的间隔时间，单位为ms

而setTimeout()的作用是：使一段代码在指定时间后运行；常用于一次性定时器及轮询。注意，setTimeout()是只运行一次代码的，若要用setTimeout()进行轮询，需要在setTimeout()的代码里再调起当前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。因此我们需要对定时器规范使用，及时清除。

我对定时器的使用有八字总结：随时使用，即时清除。简单来说，每设置一个定时器，都要对应清除，示例代码如下：

定时器

开始Interval

停止Interval

正常Timeout定时器

循环的Timeout定时器

停止Timeout

var intervalBox;//interval定时器存储器

//设置interval定时器

functionstartInterval() {

clearInterval(intervalBox);//初始化interval定时器，防止定时器重叠

intervalBox = setInterval(function(){//设置interval定时器

console.log(intervalBox);//打印interval定时器，查看interval定时器效果

}, 1000);//定时器间隔时间1000ms

}//结束interval定时器

functionstopInterval() {

clearInterval(intervalBox);//清除interval定时器

}var timeoutBox;//timeout定时器存储器

//设置正常的timeout定时器

functionstartTimeout() {

clearTimeout(timeoutBox);//初始化timeout定时器，防止定时器重叠

timeoutBox = setTimeout(function(){//设置timeout定时器

console.log(timeoutBox);//打印timeout定时器，查看timeout定时器效果

clearTimeout(timeoutBox);//清除当前timeout定时器，timeout定时器只运行一次代码，直接清掉它

//location.href="timer.html";//一段时间后跳转页面是setTimeout的常用场景之一

}, 1000);

}//设置循环的timeout定时器

functionstartTimeoutTwo() {

clearTimeout(timeoutBox);//初始化timeout定时器，防止定时器重叠

timeoutBox = setTimeout(function(){

console.log(timeoutBox);//打印timeout定时器，查看timeout定时器效果

startTimeoutTwo();//循环调用函数自身，以达到循环的效果

}, 1000);

}//结束循环的timeout定时器

functionstopTimeout() {

clearTimeout(timeoutBox);

}

原文：https://www.cnblogs.com/chenyoumei/p/12695381.html