JS中的定时器

JS的定时器相关的API有四个，分别是setTimeout、clearTimeout、setInterval、clearInterval。其中 setTimeout和clearTimeout是一组，setInterval 和 clearInterval是一组。

setTimeout

设置一个定时器，定时器在定时器到期后执行一个函数或指定的一段代码

let timerId = setTimeout(function[,delay,arg1,...,argn])
let timerId = setTimeout(code[,delay])

参数说明：
function: 定时器到期(delay毫秒)想要执行的函数
code[不推荐]: 定时器到期(delay毫秒)想要执行的字符串
delay[可选]:延迟的毫秒数，函数或者代码的执行在该延迟之后发生。如果不传值，则默认为0.注意：实际的延长时间可能会比期待的时间要长
arg1,...,argn[可选]:附加参数，定时器到期后会作为参数传给函数。

返回值：
返回值timerId是一个正整数，表示定时器的编号，可以传给clearTimeout，用来取消该定时器。

setInterval

设置一个时间间隔，每隔固定的时间间隔，重复的调用一个函数或指定的一段代码

let timerId = setInterval(function,delay[,arg1,...,argn])
let timerId = setInterval(code,delay)

参数说明：
function:每隔固定的间隔时间需要重复执行的函数
code[不推荐]:每隔固定的时间间隔需要重复执行的一段代码
delay:每次延迟的毫秒数，函数的每次调用会在该延迟之后发生。当参数值小于10的时候，会默认使用10.和setTimeout相同，实际的延长时间可能会更长
arg1,...,argn[可选]:附加参数，定时器到期后会作为参数传给函数

返回值：
返回值timerId是一个正整数，表示定时器的编号，可以传给clearInterval,用来取消定时器。

定时器使用的场景

重复执行repeat
例如: 每个10ms输出一段指定的文字

function repeat(func, count = 0, delay = 10) {
  return function () {
    let repeatCount = 0;
    let args = arguments;
    let timerId = setInterval(() => {
      if (repeatCount++ < count) {
       func.apply(null, args)
      } else {
       clearInterval(timerId)
      }
    }, delay)
    return timerId;
  }
}

防抖函数debounce
防抖：在事件被触发n秒后再执行回调，如果在n秒内又被触发，则重新计时

function debounce(func, delay) {
  let timerId = null;
  let self = this;
  return (...args) => {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      func.apply(self, args);
    },delay)
  }
}

节流函数throttle
节流：规定在n秒内只能触发一次函数，多次触发只会响应一次

function throttle(func, delay) {
  let timerId = null;
  let self = this;
  return (...args) => {
    if (timerId) {
      return;
    }
    timerId = setTimeout(() => {
      func.apply(self, args);
      clearTimeout(timerId)
    }, delay)
  }
}

参考文档：
setTimeout MDN
setInterval MDN
https://johnresig.com/blog/how-javascript-timers-work/
彻底弄懂函数防抖和函数节流