函數節流（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
        }
    }
}