js防抖和節流的區別 以及作用

先上代碼看看

防抖：

function debounce(fn, delay) {
　　let timer;
　　return function ()  {
　　　　if (timer) { // 如果有正在等待觸發的事件，就清除定時器防止多次觸發
　　　　　　clearTimeout(timer)
　　　　}
　　　　timer = setTimeout (() => {
　　　　　　fn && fn()
　　　　}, delay)
　　}
}

節流：

function throttle (fn, delay) {
　　let lastTime = 0;
　　return () => {
　　　　let nowDate = Date.now()
　　　　if (nowDate - lastTime > delay) { // 如果當前觸發時間減去最后一次觸發時間大於需要延遲的事件，就執行事件
　　　　　　lastTime = nowDate；
　　　　　　fn && fn()
　　　　}
　　}
}

　　之前一直不太明白他們的區別到底在哪里，今天大概清楚了所以記錄下來。

　　首先看看防抖，先定義了一個timer，在每次調用的時候都會清除這個定時器，比如點擊按鈕，我們設置delay為1s，第一次點擊之后，會等1s之后才執行，但是如果第二次的點擊時間在第一次點擊后的0.5s，那么就會先清除定時器，也就是說，第一次的點擊事件作廢，重新進行第二次點擊的事件，並且重新計算延遲時間，也就是說兩次的點擊之后，等到方法執行會等1.5s的時間。所以防抖是保證只執行規定時間內的最新一次。

　　再來看看節流，定義了一個最后一次的觸發事件時間，在返回的方法里，獲取了當前的時間，判斷如果當前時間減去最后一次觸發時間大於延遲之間，就把當前時間設置為最后一次觸發時間並且執行方法，也就是說，如果你點擊了第一次，只需要等1s就會觸發事件，1s之內的其他所有點擊都無效。所以節流是保證只執行規定時間內的第一次。