JS定时器详解及实例

欢迎大家来到IT世界,在知识的湖畔探索吧!

#头条创作挑战赛#

在前端，我们有很多功能需要用到定时器。譬如轮询，譬如定时关闭弹框，譬如实现秒表，譬如一段时间后跳转页面等等。因此，本文为针对JavaScript定时器进行详解及对应的应用实例。

JavaScript定时器分类：

1. 循环执行：让一段程序能够每隔设定的一段时间内执行一次，常用于轮询。

语法：setInterval(要执行的方法，时间单位 （毫秒）)

例如：setInterval(() =>{

console.log(‘这里是setInterval计时器’)

}，3000)

即：每隔3秒将在控制台里打印“这里是setInterval计时器”·

2. 倒计时定时执行（即一次性定时器，触发后只执行1次）setTimeout：让某段程序需要在延迟多少时间后执行。

语法：setTimeout(要执行的方法，时间单位 （毫秒）)

例如：setTimeout(function (){

console.log(‘ setTimeout计时器’)

}，5000)；

即：5秒后将在控制台里打印“setTimeout计时器”。

需要注意的是：

由于定时器所有任务都是由同一个线程来调度，定时器简单易用。同时这也导致了定时器所有任务都是串行执行的，同一时间只能有一个任务在执行，前一个任务的延迟或异常都将会影响到之后的任务，即定时器会重叠。而且定时器不会被自动销毁，即它所占内存无法被自动回收。如果不手动清除定时器，它会一直占用内存资源。更可怕的是，一旦使用定时器进行轮询，定时器所占的内存资源将会不断上升，若与定时器重叠问题一起出现，常导致页面卡顿。为了防止此问题的出现，在使用定时器后需要先清除定时器再进行设置，保证内存中只存在一个定时器。因此在清除定时器时，我们常在设置定时器时，定义一个变量来记录定时器返回的定时器序号，然后在定时器完成后，调用该序号清除对应定时器。

清除定时器：clearInterval()

例如：

var addnum = 0

//每隔10秒addnum会累加1次,定义变量accumulation装计时器的东西

function myinterval() {

accumulation= setInterval(() => {

addnum++

}, 10000);

}

//清除时在clearInterval()这个括号里写这个变量：accumulation就可以清除掉了。

function mystopinterval() {

clearInterval(accumulation)

}

实例：

JS定时器间隔20秒调用一次Ajax。

Sendajax =setInterval(function(){

$.ajax({

url: url,

method: ‘POST’,

dataType: ‘json’,

success: function(data) {

console.log(“AJAX call”);

}

});

}, 20000);

clearInterval(Sendajax)