js實現防抖(debounce)與節流(throttle)

防抖(debounce)

一句話概括：防抖是給定一個時間周期，如果觸發事件的周期小於該事件（也就是觸發過快），則不會觸發事件。
舉個例子：我給定的時間周期是1s，如果我在觸發第一次事件後1s內觸發該事件，則重新開始計時，直到觸發周期大於1s才會執行事件的方法。

function debounce(fn,timeout){
    let timer = null
    return function(){
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(window,arguments)
        }, timeout);
    }
}

一句話概括：節流是給定一個時間周期，然後對頻率大的觸發進行削峰，如果觸發事件的周期大於該事件（也就是觸發過快），則會觸發事件的周期限定在給定的周期內，如果小於則按照正常的時間觸發。
舉個例子：我給定的時間周期是1s，如果我在觸發第一次事件後連續0.5s內觸發該事件，那觸發周期會變成每間隔1s執行事件。

節流(throttle)

function throttle(fn,timeout){
    let flag = true
    return function(){
        if(flag){
            setTimeout(() => {
                fn.apply(this,arguments)
                flag = true
            }, timeout);
        }
        flag = false
    }
}

其他應用場景舉例

講完了這兩個技巧，下麵介紹一下平時開發中常遇到的場景：

1. 搜索框input事件，例如要支持輸入實時搜索可以使用節流方案（間隔一段時間就必須查詢相關內容），或者實現輸入間隔大於某個值（如500ms），就當做用戶輸入完成，然後開始搜索，具體使用哪種方案要看業務需求。
2. 頁面resize事件，常見於需要做頁面適配的時候。需要根據最終呈現的頁面情況進行dom渲染（這種情形一般是使用防抖，因為只需要判斷最後一次的變化情況）

第三方實現

如果自己不願意封裝，可以用第三方實現，比如lodash庫