2022.9.27 js定时器

引言

最近这段时间自己在学习node.js，学习视频里老师提到了异步编程这块的时候，觉得这块印象不深，想把这块搞懂。为啥会想记一下js的定时器，因为自己在写项目的时候，经常有用到定时器，不过只是通过它们的名字大概知道作用，没有深入了解它们，导致用的时候项目某些地方所执行的结果跟我预想得不一样，所以才来深入学习了解它们。

啥是定时器？

js提供两个通过设定时间来执行代码的方法，它们分别是setTimeout()和setInterval()。在讲它们之前，有几个概念需要了解一下：同步任务和异步任务、事件循环和任务队列、回调函数。

同步任务和异步任务

在我们用js代码所写的程序中，有同步任务和异步任务两种，同步是会阻塞后面的代码执行，而异步是不会阻塞后面代码执行。

举个栗子

同步：放学了，我叫我同学一起去打篮球，但是他还要打扫完卫生才能走，我就在哪里等啊等，等他打扫完，我们再一起去篮球场。
异步：放学了，我叫我同学一起去打篮球，但是他还要打扫完卫生才能走，我就先跟他说我先去篮球场，然后他打扫完之后，他再去篮球场。

同步任务在主线程上顺序执行，只有前一个同步任务执行完，下一个任务才会开始执行。异步任务则会被js引擎挂起，存放到任务队列中。

事件循环和任务队列

在程序运行过程中，js引擎提供了一个任务队列来专门存放待处理异步任务。在主线程里面的同步任务执行完后，会去看任务队列中的异步任务，如果某个任务满足条件可以执行，这时候异步任务进入主线程变为同步任务，继续等同步任务执行完再去任务队列执行下一个异步任务。
这时候就有两个问题：
一是异步任务怎么变成同步任务？
第一个问题其实有多种实现形式，属于"异步编程"的核心,其中一种很常用的、也是最基本的方法，就是使用回调函数。

回调函数

function f1(callback) {
  // ...
  callback();
}

function f2() {
  // ...
}

f1(f2);

一旦异步任务重新进入主线程，就会执行对应的回调函数。如果一个异步任务没有回调函数，就不会进入任务队列，也就是说，不会重新进入主线程，因为没有用回调函数指定下一步的操作。

二是怎么知道主线程中的任务执行完？
答案是js事件循环机制，js引擎会一直循环检查，一遍又一遍，只要本轮的同步任务执行完了，引擎就会去检查那些挂起来的异步任务，是不是可以进入主线程了，从而进入下一轮循环。这种循环检查的机制，就叫做事件循环（Event Loop）。

回到正题

1. setTimeout()

setTimeout函数用来指定某个函数或某段字符串代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(function|String, delay);

看看下面这段代码输出什么？

function f2() {
    // ...
    console.log(2)
}
console.log(3)
setTimeout(f2, 1000)
console.log(1)

其实setTimeout()帮我们做的就是往任务队列中添加异步任务，既然加入到任务队列中，那就必须等同步任务执行完一秒后执行f2。

setTimeout()的应用

比如实现防抖功能，其实在面试中也有可能会问到，在这里记录一下，节流与防抖。
项目中实现鼠标滚轮滚动事件，这里就用到了防抖，用户可能稍微滚动鼠标的滚轮，就会触发上百次事件，那我们肯定不能这么干吧。如果事件里有ajax请求，那如果一直发请求，那么很可能会收到后端的语音轰炸。

// 设置一个延迟器
    let delay
    // 首先判断歌词是否被渲染出来，是的话为歌词部分绑定滚轮滚动事件，
    // 当歌词手动滚动时，不会立马自动定位到播放的位置
    if (this.$refs.lyrics) {
      this.$refs.lyrics.addEventListener('mousewheel', () => {
        // 如果delay绑定了延迟器，则每次滚轮滚动时先关闭上一个延迟器
        if (delay) {
          clearTimeout(delay)
        }
        // 开启手动滚轮状态
        this.isRoll = true
        // 设置延迟器，1.5秒后关闭手动滚轮状态
        delay = setTimeout(() => {
          this.isRoll = false
        }, 1000)
      })
    }

防抖的关键在于频繁触发事件时，都会清除上一次的操作，直到最后一次停下来不再触发时，才会完整执行完整个操作。

2. setInterval()

setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

var timerId = setInterval(function|String, delay);

其中要知道的是，setInterval()它有可能没有时间间隔，原因是当setInterval()包裹的某个任务执行时间超过delay(超过它设置的延时时间)时，一旦任务执行完，下个任务会立马执行。比如：setInterval指定每 100ms 执行一次，每次执行需要 5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。如果某次执行耗时特别长，比如需要105毫秒，那么它结束后，下一次执行就会立即开始。

	setInterval(function () {
        sleep(3000);
        console.log(2);
    }, 1000);

    function sleep(ms) {
        var start = Date.now();
        while ((Date.now() - start) < ms) {
        }
    }

上面代码的结果是每隔3秒会打印一个2，我们的意图是想每隔1秒就打印一个2，但是由于任务执行时间是3秒，导致setInterval()推迟到3秒后才打印出2。

还有一点要知道的是，setTimeout()和setInterval()的运行机制，它们都是把任务放到任务队列里，等到设定时间到了就执行，但是如果主线程的同步任务的执行时间太长，超过它们设定的时间，那么就得延迟执行。

	setInterval(function () {
        console.log(2);
    }, 1000);

    sleep(3000);
    
    function sleep(ms) {
        var start = Date.now();
        while ((Date.now() - start) < ms) {
        }
    }

一开始设定定时器，放到任务队列中，紧接着就执行sleep()，由于sleep需要3秒才能执行完，那么setInterval()就不得不等到3秒后才开始生效。

3.setTimeout(f, 0)

这个我其实一开始也很容易理解错，在这里记录下。setTimeout(f, 0)中的回调函数f，并不会立即执行，有了任务队列和事件循环这个概念就很好理解，必须执行完全部的同步任务后，setTimeout()中的回调函数f才会被执行，设置延迟时间为0的目的是为了回调函数f尽可能快地被执行。

setTimeout(function () {
  console.log(1);
}, 0);
console.log(2);
// 2
// 1

上面代码先输出2，再输出1。因为2是同步任务，在本轮事件循环执行，而1是下一轮事件循环才执行。

每天学一点，记录一点！
参考链接：https://wangdoc.com/javascript/async/timer.html#settimeout