函數(shù)防抖

函數(shù)防抖，debounce，將多個信號合并為一個信號。

用戶觸發(fā)事件，將在5秒后開始執(zhí)行程序，如果用戶在5秒內(nèi)又觸發(fā)事件，就需要繼續(xù)重新計(jì)時5秒，然后再執(zhí)行。

代碼實(shí)現(xiàn)：

function debounce(fn, delayTime){
    let timer
    return function(){
        clearTimeout(timer)
        let context = this
        let args = arguments
        timer = setTimeout(()=>{
            fn.apply(context, args)
        },delayTime)
    }
}
var a = debounce(function(e){console.log('延遲了')},
                 1000)

document.querySelector('input').addEventListener('input',a)

應(yīng)用場景

• 每次resize/scroll 觸發(fā)統(tǒng)計(jì)事件
• 文本輸入的驗(yàn)證（連續(xù)輸入文字后發(fā)送AJAX請求進(jìn)行驗(yàn)證）

函數(shù)節(jié)流

函數(shù)節(jié)流，throttle

用戶觸發(fā)事件，開始計(jì)時5秒，每5秒執(zhí)行一次，如果沒有觸發(fā)，就不執(zhí)行。

function throttle (fn, time) {
    let timeout
    let start = new Date
    let time = time || 200
    return function(){
        let context = this
        let args = arguments
        let current = new Date() - 0
        clearTimeout(timeout)
        
        if(current - start >= time){
            fn.apply(context, args)
            start = current
        }else{
            timeout = setTimeout(()=>{
            fn.apply(context, args)
            },time)
        }
    }
}

應(yīng)用場景

• DOM元素的拖拽功能（mousemove）
• 計(jì)算鼠標(biāo)的移動距離（mousemove）
• canvas模擬畫板功能（mousemove）
• 搜索聯(lián)想（keyup）
• 監(jiān)聽滾動事件判斷時候到達(dá)頁面底部，自動加載更多（給scroll家debounce，只有用戶停止?jié)L動，才會是否到了底部；而throttle，只要頁面滾動就會間隔一段時間判斷一次）