玩转setTimeout和setInterval

少侠留步，看看下面的代码

const setTimeoutVal = setTimeout(() => { console.log('setTimeout'); }, 1000)
console.log('setTimeoutVal', setTimeoutVal);
clearTimeout(setTimeoutVal)

一.对于 setTimeout函数来说，

• 它是JavaScript中常见的一个API。
• 它接收两个参数：一个是要执行的函数和一个延迟时间（以毫秒为单位）。
• 前面这个参数我们可以传匿名函数:

 setTimeout(function() { console.log('setTimeout'); }, 1000)

• 或者 显式函数

 setTimeout(function timeout() { console.log('setTimeout'); }, 1000)

• 或者 上面例子中的箭头函数

• 在上面这个例子来说意思就是在1000ms之后我们执行setTimeout函数中的回调函数。

• 这里需要注意，setTimeout函数中的回调函数会在事件循环的下一个循环中执行。

• 也就是说，在setTimeout函数执行完毕之后，会先将回调函数放入事件循环的队列中，然后继续执行其他任务，直到事件循环的下一个循环中，才会执行回调函数。

setTimeout在JavaScript中属于宏任务
常见的宏任务包括：setTimeout、setInterval、requestAnimationFrame等。

const setIntervalVal = setInterval(() => { console.log('setInterval'); }, 1000)
console.log('setIntervalVal', setIntervalVal);
clearInterval(setIntervalVal)

二.对于setInterval函数来说，

• 它和setTimeout函数类似，也是接收两个参数：一个是要执行的函数和一个延迟时间（以毫秒为单位）。

• 前面这个参数我们可以传入的函数也是跟setTimeout函数相同

• 在上面这个例子来说，意思是在1000ms之后我们执行setInterval函数中的回调函数。

• 这里需要注意，setInterval函数中的回调函数会每隔指定的延迟时间执行一次。这个跟setTimeout函数不同，setTimeout函数中的回调函数只会执行一次。

• setTimeout函数表示的是在指定的延迟时间之后执行一次回调函数，setInterval函数表示的是每隔指定的延迟时间执行一次回调函数。

• 所以这就决定了它们适用的业务场景不同。

  • 我们在需要反复刷新的业务逻辑中，一般会使用setInterval函数
  • 而setTimeout函数则试用在延迟某些事务或者方法
  • setInterval在JavaScript中也属于宏任务

三.我们调用这两个函数的时候，它们都是有返回值的。

• 这两个返回值都是数字类型的，表示的是一个ID，我们可以通过这个ID来取消对应的定时器。
• 取消定时器的方式是通过clearTimeout和clearInterval这两个函数。
• 这两个函数的参数就是前面提到的返回值。

四.在谈到它们的this指向时

需要注意，这两个函数的this指向都是window。
关于this的玩法，玩转this指向

五.我还想玩一下这两个函数如果后面的参数赋值为0或者负数是什么情况呢？

• 我发现我把timeout这个参数赋值为负数的话，还是可以打印，并没有报错。

• 后面我发现其实负数或者赋值为0的话，其实是一样的，

• 因为setTimeout函数的第二个参数是一个延迟时间，如果这个延迟时间小于0的话，其实它还是会被认为是0。

• 在它为0时表示希望立即执行，但是它还是会在事件循环的下一个循环中执行。

• 后面思考了一下其实这么做也有道理的，如果我们如果让它一直调用的话，
  其实它就会一直占用着事件循环的资源，这样就会导致其他任务无法执行。
  所以为了避免这种情况的发生，让它在事件循环的下一个循环中执行，这样就不会一直占用资源了。

• 查阅了资料后，发现一般规定定时器最小的时间间隔为4ms。
  但是我发现如果setInterval第二个参数设置为0或负数的时候，它就会一直执行下去，
  直到我们手动取消它。

setTimeout(() => { console.log('setTimeout'); }, -1)
setInterval(() => { console.log('setInterval'); }, 0)

• 负数我们玩过了，我们来试一下嵌套呢？
• setInterval的嵌套，在开发过程中暂时没遇到
  不过我们来玩一下setTimeout的嵌套，

setTimeout(() => {
  console.log('(3层)第一层setTimeout');
  setTimeout(() => {
    console.log('(3层)第二层setTimeout');
    setTimeout(() => {
      console.log('(3层)第三层setTimeout');
    }, 1000);
  }, 1000);
}, 1000);

setTimeout(() => {
  console.log('(2层)第一层setTimeout');
  setTimeout(() => {
    console.log('(2层)第二层setTimeout');
  }, 1000);
}, 1000);

最后这个打印结果就让大家自己去玩。