js定时器setTimeOut() 和 setInterval()

记录一些以后会经常用到的模块，一点一点积累…

一、常用的两种定时器

常用的两种：setTimeOut() 和 setInterval()。interval：间隔

区别:
setTimeOut()：延时调用，只执行一次；
setInterval()：间隔调用，需要用清除定时器处理。

参数：
setTimeout(code,millisec,lang)
setInterval(code,millisec,lang)

- code：要调用的函数或要执行的代码串。（必需）
- millisec：时间间隔，以毫秒计。（必需）
- lang： 脚本语言 JScript | VBScript | JavaScript （可选，常常不需要用到）

定时器清除方法：
 - clearTimeout(obj)
 - clearInterval(obj)
定时器在调用时，会返回一个整形数字，代表定时器的序号,清除时就是用到这个序号来定位清除定时器。

1、setTimeOut

setTimeOut实例

console.log("开始时间：" + new Date());
        
function test1(){
    console.log("测试1回调时间:" + new Date());
}
// 函数名，不带参数
setTimeout(test1,1000);

// 字符串
// setTimeout('test1()',3000); // 报错了 这样写不行

// 匿名函数
setTimeout(function(){
    console.log("我是匿名函数"+ new Date());
}, 5000)
// 开始时间：Thu Apr 22 2021 15:17:18 GMT+0800 (中国标准时间)
// 我是匿名函数Thu Apr 22 2021 15:17:23 GMT+0800 (中国标准时间)

function test4(obj){
    console.log("测试4:" + obj +";回调时间:" + new Date());
}
setTimeout("test4('obj')",7000)  // 还是报错了 应该不能用字符串来表示

2、setInterval

setInterval实例

因为setInterval()是间隔调用，所以得用到清除定时器，才可以关闭。这里为了能看到每间隔1秒后都会调用，直到遇到了清除定时器clearInterval()，用的是延迟5秒后调用清除定时。

console.log("开始时间：" + new Date());

var demo1 = setInterval(function(){
    console.log("demo1回调时间:" + new Date());
}, 1000)

setTimeout(function(){
    clearInterval(demo1);
    console.log("关闭demo1的时间:" + new Date());
}, 5000)

二、定时器序号

var demo1 = setInterval(function(){
    console.log("demo1回调时间:" + new Date());
}, 1000)

// 定时器序号
console.log(demo1);

setTimeout(function(){
    clearInterval(demo1);
    console.log("关闭demo1的时间:" + new Date());
}, 5000)

三、定时器线程理解

先看个例子：

console.log("开始时间：" + new Date());

setTimeout(function(){
    console.log("定时器回调时间：" + new Date());
}, 5000)

for(let i = 0; i < 9000; i++){  // 第一次循环3000，第二次循环9000
    console.log("这是循环");
    if(i==8999){
        console.log("循环结束：" + new Date());
    }
}

console.log("事件队列最后一个：" + new Date());

相同的代码，只是中间循环的次数不同，第一个返回的定时器时间在事列后5秒，而第二个返回的定时器时间是事列后3秒，且都距离开始时间5秒。

如果中间的循环时间越大，最后定时器回调的时间还会是开始时间的5秒后吗？ 把循环换成50000，再来试一下：

最后发现定时器回调时间已经超过了当初定的5秒，这是为什么呢？

解释：

当循环的时间较短，没有超过定时器的延迟5秒，当事列结束后再调用定时器回调函数；

当循环的时间越来越长，但还是没有超过5秒，定时器还能按照规定时间执行；

当循环时间很长，已经超过了定时器回调时间，但是因为事件队列是栈结构，即时到了5秒也不能立即执行定时器回调函数，而是把回调函数放入事件队列栈中，只能等事件栈前面的事件依次执行完后再执行定时器回调函数，所以最后定时器回调函数执行的时间会包括前面事件的执行时间。

持续更新

这里是定时器的理解与用法，后面若有相关方法将会持续更新。