函數節流（throttle）與函數去抖（debounce）

前言

做過前端的童鞋應該都知道lodash這個強大的使用工具庫。爲什麼要寫這篇文章呢，主要今天遇到一個問題，socket推送消息太頻繁，導致saga頻繁更新，頁面有所卡頓，需要通過函數節流控制，發現自己突然不會寫這樣的代碼，而且模糊了節流和抖動的區別。簡單實現一下，源碼其實複雜的多。

區別

節流：一些場景頻繁觸發，導致頁面崩潰，資源加載重複等行爲，需要控制執行頻率，這個時候就叫做節流。
去抖：主要針對的是頻繁觸發某個事件後，然後進行後續處理的場景。常見的就是頻繁輸入停止3s(假設)後進行查詢等操作。

_.debounce

• 函數接口定義：

@param fn實際需要調用的函數
@param second 空閒時間
@return callback 返回調用函數

const debounce = (fn, second) => {
    let timer = null
    return () => {
        clearTimeout(timer)
        timer = setTimeout(() =>{
            fn()
        }, second)
    }
}

_.throttle

• 函數接口定義：

@param delay延遲時間
@param fn需要調用的函數
@return cb返回函數

const throttle = (fn, delay) => {
    let last = 0
    return () => {
        let current = new Date()
        if(current-last > delay) {
           fn()
           last = current
        }
    }
}