2020-06-17 每日一題：防抖和節(jié)流函數(shù)

本文也在我的blog上發(fā)布：跳轉(zhuǎn)博客

題目

const debounse = (fn,delay)=>{
    // 介紹防抖函數(shù)原理，并實現(xiàn)
}
const throttle = (fn,delay=500)=>{
    // 介紹節(jié)流函數(shù)原理，并實現(xiàn)
}

引子

第一次接觸防抖和節(jié)流函數(shù)是在大一完成web學(xué)習(xí)的第一個項目時，當時需要對鼠標滾輪進行監(jiān)聽，但是滾輪一次會觸發(fā)很多很多次事件。由此接觸到了防抖和節(jié)流函數(shù)。所以如果用一句話概括一下防抖和節(jié)流函數(shù)，我的表達就是：防止一個函數(shù)被連續(xù)快速多次觸發(fā)，消耗太多資源或者造成預(yù)期外的效果。

防抖函數(shù)or節(jié)流函數(shù)？

防抖函數(shù)和節(jié)流函數(shù)都可以防止操作被連續(xù)觸發(fā)，那么他們的區(qū)別是什么呢？

防抖函數(shù)：在事件觸發(fā)n秒后再執(zhí)行回調(diào)，如果這期間再次觸發(fā)，則重新計時

節(jié)流函數(shù)：在一定時間內(nèi)，只能觸發(fā)一次函數(shù)

倘若一個按鈕綁定了某一事件，而這個按鈕被連續(xù)不斷的快速點擊，防抖函數(shù)會等到停止點擊n秒后才觸發(fā)，而防抖函數(shù)每隔一段時間就會被觸發(fā)一次。

所以由此可知，防抖函數(shù)和節(jié)流函數(shù)的使用場景分別為：

防抖函數(shù)：需要保證提交信息為最新的時候，比如登錄，滑塊等。

節(jié)流函數(shù)：需要一個較緩的頻率提交一直變化的值時，如搜索推薦項。

代碼實現(xiàn)：

const debounse = (fn,delay)=>{
    let timer = null;
    return (...args)=>{
        //清除定時器
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn.apply(this.args);
        },delay)
    }
}

const throttle = (fn,delay=500)=>{
    let flag = true;
    return (...args)=>{
        if(!flag){
            return;
        }
        flag = false;
        // 開始計時
        setTimeout(()=>{
            fn.applay(this,args);
            flag = true;
        },delay);
    }
}