節(jié)流與防抖這兩個(gè)概念大家并不陌生，面時(shí)高頻題，可是你是否真正了解兩者的真正區(qū)別？是否能夠在實(shí)際開發(fā)中知道什么時(shí)候該用防抖？什么用節(jié)流？

閱讀本文你將收獲：

• 清晰認(rèn)識防抖與節(jié)流之間的區(qū)別，并能夠正確的應(yīng)用與實(shí)際開發(fā)中
• 多樣的代碼實(shí)現(xiàn)
• 閉包的特性的應(yīng)用

什么是防抖

debounce(fn, threshhold)

技術(shù)最終都要服務(wù)于社會，任何脫離業(yè)務(wù)（社會）實(shí)際的都是耍流氓，防抖當(dāng)然也不例外，實(shí)際生活中對于拍照（人工防抖，不是智能那種:joy:），如果你在自拍，你肯定不會在鏡頭沒穩(wěn)定之前，按下快門吧（PS:如果你想要這種模糊效果當(dāng)我沒說:no_mouth:），也就是鏡頭不穩(wěn)（手抖）你不會按下快門，如果你感覺穩(wěn)了，才會按下快門，類似：

• 防抖函數(shù)debounce的功能就相當(dāng)于幫你判斷什么時(shí)候該按下快門
• fn相當(dāng)于快門
• threshhold(閾值)就相當(dāng)于人體感知穩(wěn)定的需要經(jīng)歷的時(shí)間閾值
• 只有穩(wěn)定之后才會按下快門即執(zhí)行fn，也就是說一旦間隔threshhold有一次抖動都會重新判斷穩(wěn)定
• 如果threshhold間隔內(nèi)一直穩(wěn)定不下來，第一次觸發(fā)threshholdms之后fn不會被執(zhí)行，同理一直不穩(wěn)定，fn永遠(yuǎn)不會被執(zhí)行（假如死循環(huán)）

// fn => 2
function debounce(fn, threshhold){ // 1
    if(!fn instanceof Function) {
        throw new TypeError('Expected a function')
    }
    let timer = null;
    return function () {
        clearTimeout(timer); // 3
        timer = setTimeout(() => { 
            fn.apply(this) // 4 
        },threshhold)
    };
}

代碼淺析：debounce就相當(dāng)于幫你判斷是什么時(shí)候該按下快門，要執(zhí)行的fn相當(dāng)于快門，人體的感知穩(wěn)定時(shí)間閾值為threshhold,如果連續(xù)兩次調(diào)用（對應(yīng)拍照抖動）小于threshhold,那么肯定要重新設(shè)置穩(wěn)定間隔的起始點(diǎn)也就是重置clearTimeout(timer),當(dāng)然如果兩次間隔超過threshhold,重置已經(jīng)無法影響了已經(jīng)發(fā)生的調(diào)用了，最后定時(shí)器執(zhí)行fn.apply(this)就是手終于不抖可以按下快門啦:joy:

什么是節(jié)流

throttle(fn, threshhold)

實(shí)際生活中,節(jié)流這一概念其實(shí)生活中有很多例子，比如這快過年了，火車站考慮到大家的安全，對進(jìn)站進(jìn)行節(jié)流（官方應(yīng)該叫限流，其實(shí)表達(dá)都是同一個(gè)意思）因?yàn)閱挝粫r(shí)間內(nèi)車站的接待（容納）人數(shù)是有限的，還有大家更加熟悉的例子，王者榮耀或者英雄聯(lián)盟這類moba游戲，都有攻速上限（攻速2.5），換句話說哦假設(shè)程序設(shè)定了英雄一秒最多A五下，那么即使你手速再快，1s內(nèi)也A不出第六下，通過以上例子我們可以得出：

threshhold間隔內(nèi)函數(shù)fn無論觸發(fā)多少次，第一次觸發(fā)到threshholdms后都是只執(zhí)行一次

第二次觸發(fā)距離第一次時(shí)間超過threshhold，則第二次會立即執(zhí)行

根據(jù)這兩點(diǎn)，有兩種實(shí)現(xiàn)方式

第一種

function throttle(fn, threshhold) {
    if(!fn instanceof Function) {
        throw new TypeError('Expected a function')
    }
    let limited = false;  // 節(jié)流閥標(biāo)志位
    let start = Date.now();
    threshhold = threshhold || 500
    return function (...args) {
        let current = Date.now();
        limited = limited && current- start < threshhold
        if(!limited) {
                fn.apply(this,args);
                limited = true;
                start = Date.now();
        }
    }
}

代碼淺析：通過limited節(jié)流閥標(biāo)志位模擬當(dāng)前是否需要節(jié)流（限流），第一次默認(rèn)false即首次不限流（車站為空的:joy:），限流之后(limited = true)且只有兩次時(shí)間間隔(current- start)超過threshhold,才會除去限制，調(diào)用fn即車站讓旅客進(jìn)站進(jìn)入新的周期重置開始時(shí)間start

第二種

function throttle2(fun, threshhold) {
    if(!fun instanceof Function) {
        throw new TypeError('Expected a function')
    }
    let limited = false; // 節(jié)流閥標(biāo)志位
    let timer = null;
    let start = Date.now();
    threshhold = threshhold || 500
    return function (...args) {
        let current = Date.now();
        limited = limited && current- start < threshhold
        if (limited) {
            clearTimeout(timer)
            timer = setTimeout(() => {
                limited = true
                start = Date.now()
                fun.apply(this, args)
            }, threshhold)
        }else {
            limited = true
            start = Date.now();
            fun.apply(this,args)
        }
    }
}

代碼淺析：第二種使用了setTimeout定時(shí)器的方式，多加了如果最后一次觸發(fā)距離上一次調(diào)用fn小于threshhold則這次設(shè)置的定時(shí)器回調(diào)將會在下一個(gè)threshhold周期內(nèi)執(zhí)行，所以這種方式觸發(fā)多次fn總共會執(zhí)行兩次,只是第二次會在下一個(gè)threshhold周期內(nèi)執(zhí)行

節(jié)流兩種方式對比

• 第一種，一個(gè)threshhold間隔內(nèi)多次促發(fā)，fn只會被執(zhí)行一次，最后一次并不會進(jìn)入下一個(gè)周期執(zhí)行，比如連續(xù)1秒內(nèi)平A了5次超過限度（節(jié)流）5次，第六次并不會說下一秒自動平A，而是直接舍去
• 第二種，一個(gè)threshhold間隔內(nèi)多次促發(fā)，fn總共會執(zhí)行兩次，注意第二次會進(jìn)入下一個(gè)threshhold周期執(zhí)行

兩者比較

相同點(diǎn)：

• 其實(shí)本質(zhì)上都是為了節(jié)省程序的性能（防止高頻函數(shù)調(diào)用）
• 借助了閉包的特性來緩存變量（狀態(tài)）
• 都可以使用setTimeout實(shí)現(xiàn)

區(qū)別：

• 使用防抖，可能n個(gè)threshhold時(shí)間間隔之后fn也沒執(zhí)行，但是使用節(jié)流觸發(fā)的threshhold間隔內(nèi)有且只執(zhí)行一次
• 同樣threshhold間隔內(nèi)連續(xù)觸發(fā)，防抖只執(zhí)行一次，而節(jié)流會執(zhí)行兩次，只是在不同的threshhold周期內(nèi)
• 側(cè)重點(diǎn)不同，防抖側(cè)重于穩(wěn)定只能執(zhí)行一次，而節(jié)流強(qiáng)調(diào)限周期內(nèi)次數(shù)，即執(zhí)行頻率，不限制所有時(shí)間內(nèi)的總次數(shù)

應(yīng)用場景

防抖：

• 一些表單元素的校驗(yàn)，如手機(jī)號，郵箱，用戶名等
• 部分搜索功能的聯(lián)想結(jié)果實(shí)現(xiàn)

節(jié)流：

• 一些鼠標(biāo)的跟隨動畫實(shí)現(xiàn)
• scroll，resize, touchmove, mousemove等極易持續(xù)性促發(fā)事件的相關(guān)動畫問題，降低頻率

總結(jié)

無論什么技術(shù)都有他擅長的地方，技術(shù)與實(shí)現(xiàn)的優(yōu)與劣不能單從技術(shù)方面去考量，這樣是沒有意義的，如對于節(jié)流函數(shù)的兩種方式，他們都有適合的場景，比如你的產(chǎn)品需要類似游戲內(nèi)限制攻速的，顯然節(jié)流的第一種方案更合適，元芳你怎么看?:laughing:(ps:github源碼地址含單測)

參考鏈接

https://lodash.com/docs/4.17.15#debounce

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論