防抖

運(yùn)行方式：在第一次觸發(fā)事件時(shí)，不立即執(zhí)行函數(shù)，而是給出一個(gè)期限值比比如200ms，
1，如果在200ms內(nèi)沒有再次觸發(fā)滾動(dòng)事件，那么就執(zhí)行函數(shù)
2，如果在200ms內(nèi)再次觸發(fā)滾動(dòng)事件，那么當(dāng)前的計(jì)時(shí)取消，重新開始計(jì)時(shí)
效果：如果短時(shí)間內(nèi)大量觸發(fā)同一事件，只會(huì)執(zhí)行一次函數(shù)。
使用場景：搜索框input事件，例如要支持輸入實(shí)時(shí)搜索可以使用節(jié)流方案（間隔一段時(shí)間就必須查詢相關(guān)內(nèi)容），或者實(shí)現(xiàn)輸入間隔大于某個(gè)值（如500ms），就當(dāng)做用戶輸入完成，然后開始搜索，具體使用哪種方案要看業(yè)務(wù)需求。

function debounce(fn,delay){
    let timer = null //借助閉包
    return function() {
        if(timer){
            clearTimeout(timer) //進(jìn)入該分支語句，說明當(dāng)前正在一個(gè)計(jì)時(shí)過程中，并且又觸發(fā)了相同事件。所以要取消當(dāng)前的計(jì)時(shí)，重新開始計(jì)時(shí)
            timer = setTimeOut(fn,delay) 
        }else{
            timer = setTimeOut(fn,delay) // 進(jìn)入該分支說明當(dāng)前并沒有在計(jì)時(shí)，那么就開始一個(gè)計(jì)時(shí)
        }
    }
}

截流

運(yùn)行方式：如果短時(shí)間內(nèi)大量觸發(fā)同一事件，那么在函數(shù)執(zhí)行一次之后，該函數(shù)在指定的時(shí)間期限內(nèi)不再工作，直至過了這段時(shí)間才重新生效
使用場景：頁面resize事件，常見于需要做頁面適配的時(shí)候。需要根據(jù)最終呈現(xiàn)的頁面情況進(jìn)行dom渲染（這種情形一般是使用防抖，因?yàn)橹恍枰袛嘧詈笠淮蔚淖兓闆r）

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息時(shí)間 暫不接客
           return false 
       }
       // 工作時(shí)間，執(zhí)行函數(shù)并且在間隔期內(nèi)把狀態(tài)位設(shè)為無效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}