js優化之防抖節流

防抖函式

應用場景：
搜尋框/滾動條的監聽事件處理，防止每輸入一個字/滾動螢幕，都會觸發事件處理，造成效能浪費。
短時間內大量觸發同一事件，只會執行一次函式，實現原理為設定一個定時器，約定在xx毫秒後再觸發事件處理，每次觸發事件都會重新設定計時器，直到xx毫秒內無第二次操作

引數1為觸發事件函式，參2位延遲時間
function delayShake(fn, time) {
    let timeout = null
    return function() {
        let context = this
        let args = arguments
        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(() => {
            fn.apply(context, args)
        }, time)
    }
}

節流函式

防抖是延遲執行，而節流是間隔執行，函式節流即每隔一段時間就執行一次，實現原理為設定一個定時器，約定xx毫秒後執行事件，如果時間到了，那麼執行函式並重置定時器，和防抖的區別在於，防抖每次觸發事件都重置定時器，而節流在定時器到時間後再清空定時器

function throttle(fn, time) {
    let timeout = null
    return function() {
        let context = this
        let args = arguments
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null
                fn.apply(context, args)
            }, time)
        }

    }
}