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/
完全弄懂函數防抖和函數節流