前端开发——两种定时器

Posted 2023-05-08

参考技术A js的两种定时器分别是 setInterval 和 setTimeout 。他们的区别在于计时的方式不同，前者为循环计时，后者为定时计时。下面我们来分别介绍一下。

setInterval

window.setInterval([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval]，每隔一段时间，就会执行一次对应的方法function，直到计时器被清除为止。计时器的清除方法为 window.clearInterval(计时器名称)

例一：

本案例需要引入jQuery 否则无效

setTimeout

window.setTimeout([function],[interval]) 设置定时器及等待时间，但计时器到达时间后执行一次就会停止（计时器还在，不过没用了）计时器的清除方法是 window.clearTimeout(计时器名称)

例二：

本案例需要引入jQuery 否则无效

这里要说明一下，定时器清除后其返回值仍然存在，之后定时器的返回值在此返回值的基础上增加，类似医院排号，1号看完叫的是2号，不是从1号重新开始。

更多前端内容请  点击关注 

实战Nodejs计时器的玩法

脉冲云平台本身便使用了NodeJS做为开发语言，前端页面使用的是React技术。在做项目的时候一般都会用到计时器，在Nodejs中有两种计时器：SetTimeout 和 SetInterval。相对于定时器SetTimeout 和 SetInterval 的如何在指定时间之后执行被大家所熟悉来说，这两个系统函数的第三个参数可能有些同学还不是太清楚，我也是在做脉冲云的项目时发现的，现学现卖一下。

这两个函数的基本用法很简单，setTimeout是在指定时间之后执行一次函数体；setInterval是每过一段时间就执行一次，直到清除该定时器。应用如下：

//setTimeout

setTimeout(function(){

console.log("this is console.log");

},100);

//setTimeout 在100毫秒之后输出"this is console.log"，定时器执行完毕；

//setInterval

let m = 1;

let t = setInterval(function(){

console.log(m);

m++;

if(m>10){

    clearInterval(t);

}

},100);

//setInterval 每100毫秒输出一次m的值，当m大于10,清除定时器，也就不再输出了。

其实定时器还可以有第三个参数，甚至第四第N个参数，当然N是不能大于函数所能接受的参数最大值的。

从第三个参数开始，包括第三个参数都将会当做定时器的回调函数的参数依次传入回调函数。

//setTimeout

setTimeout(function(l,m,n){

console.log(l,m,n);

},100 ,1,10,100);

//setTimeout 分别传入了第三四五个参数，在回调函数中也同时接收了三个参数，最终输出为

//1 10 100

//setInterval

let m = 1;

let s = setInterval(function(x,y,z){

console.log(x,y,z);

m++;

if(m>10){

    clearInterval(s);

}

},100,m,m10,m100)

//setInterval 也和setTimeout一样从第三个参数开始都会按顺序传入回调函数。

//须要注意的是如果外部参数是值类型，不论第三四五参数如何变化，

//回调函数所接收的参数只是第一次传入的值

//上面的console.log(x,y,z)输出将会是

//1 10 100

//1 10 100

//1 10 100

//1 10 100

//1 10 100

//1 10 100

//1 10 100

//但如果外部参数如果是引用类型，比如是一个obj,那么，每次执行时是可以得到不同的数据的，例如：

let m = {a:1};

let s = setInterval(function(x){

console.log(x);

m.a++;

if(m.a>10){

    clearInterval(s);

}

},100,m)

//那么，上面console.log(x)的输出将会是：

//{ a: 1 }

//{ a: 2 }

//{ a: 3 }

//{ a: 4 }

//{ a: 5 }

//{ a: 6 }

//{ a: 7 }

//{ a: 8 }

//{ a: 9 }

//{ a: 10 }