JS提升篇:定时器的用法和清除

4,689 阅读2分钟

前言

在前端开发的过程中,有些时候需要某段程序等待一段时间后再开始执行,在JavaScript中主要通过定时器实现这一类需求。

JS的两种定时器

window.setTimeout([function],[interval])

设置一个定时器,并且设定了一个等待的时间,当到达时间后,执行对应的方法,当方法执行完成定时器停止。

window.setInterval([function],[interval])

设置一个定时器,并且设定了一个等待的时间,当到达时间后,执行对应的方法。 当方法执行完成,定时器并没有停止,以后每隔这么长的时间都会重新的执行对应的方法,直到我们手动清除定时器为止。

注意:setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

定时器返回值

JS中的定时器是有返回值的,返回值是一个数字,代表当前是第几个定时器。

var timer1=window.setTimeout(function(){},1000);  //timer1->1 当前是第一个定时器
var timer2=window.setTimeout(function(){},1000);  //timer2->2` 当前是第二个定时器

window.clearTimeout(timer1); //->把第一个定时器清除掉
//这里也可以用window.clearInterval(timer1)、window.clearTimeout(1)

var timer3=window.setTimeout(function(){},1000);   
//timer3->3 当前是第三个定时器 ,虽然上面的定时器timer1清除掉了,但是号还是继续往后排的;

清除定时器:

window.clearInterval(timer1)/window.clearTimeout(time1) 两种清除方式可以分别清除通过setTimeout和setInterval设置的定时器。

两种方式在设置定时器的时候有区别,清除定时器的时候没有区别,并且参数不仅可以是timer,还可以是其返回值。

需要注意的是,定时器即使清除了,其返回值也不会清除,之后设置的定时器的返回值也会在其返回值的基础上继续向后排。

业务场景

setTimeout用于延迟执行某方法或功能;setInterval则一般用于刷新表单,对于一些表单的假实时指定时间刷新同步。

来源:个人博客