JS之節(jié)流和防抖

fevin 發(fā)布于2019-08-26 17:15 / 2935人閱讀

摘要：節(jié)流在指定時間之內(nèi)，讓函數(shù)只觸發(fā)一次。防抖對于一定時間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次?？偨Y(jié)以上只是很簡單的寫了一下節(jié)流和防抖的原理，在里，實(shí)現(xiàn)起來更加復(fù)雜，但是背后的原理核心就是上邊代碼寫的。

概述

在平時的開發(fā)中，經(jīng)常會聽到兩個差不多很相近的詞。節(jié)流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優(yōu)化方案。

節(jié)流：在指定時間之內(nèi)，讓函數(shù)只觸發(fā)一次。
防抖：對于一定時間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次。

兩個方法在underscore.js中都已經(jīng)實(shí)現(xiàn)了。本文將會重點(diǎn)說明兩個函數(shù)的應(yīng)用場景和背后的原理。

應(yīng)用場景 節(jié)流

throttle在英語里的意思是節(jié)流閥，顧名思義，設(shè)置一個閥值（制定一個時間），在這個閥值或者時間之內(nèi)，函數(shù)只會執(zhí)行一次。

舉個例子，我們執(zhí)行頁面滾動的時候，比如在react里面，可能每次滾動都會觸發(fā)一次render，這樣嚴(yán)重影響性能，甚至?xí)斐蔀g覽器卡死。如果我們設(shè)置一個300ms的時間閥，那么在這段時間內(nèi)，滾動時候只會觸發(fā)一次render.

同樣的，當(dāng)我們拖拽某個元素的時候，會每次判斷mousemove時跟位置相關(guān)的信息，每次都會執(zhí)行相關(guān)的計算和判斷，這種情況就和滾動時候一樣，如果設(shè)置一個時間閥，那么就可以避免由于大量執(zhí)行事件計算而造成的性能下降。

防抖

我自己的理解，防抖的意思可以認(rèn)為是，阻止連續(xù)的抖動（所謂的事件觸發(fā)），也就是說，我們用防抖來讓那些連續(xù)觸發(fā)的事件只觸發(fā)一次。

比如，當(dāng)我們對一個文本框進(jìn)行輸入的時候，在react中，每次都會觸發(fā)onChange事件，我們可能在每次事件里發(fā)送ajax請求，判斷輸入的用戶名是否曾經(jīng)注冊過，這種情況下我們使用防抖，可以保證只會在最后一次onChange事件才會觸發(fā)ajax請求。

實(shí)現(xiàn)原理

節(jié)流

節(jié)流實(shí)現(xiàn)起來很好理解，設(shè)置一個bool值，在時間閥之內(nèi)，根據(jù)這個bool來判斷是否執(zhí)行函數(shù)。

function throttle(fn,times = 300){
    let bool = true
    return function(){
        if(!bool){
            return false
        }
        bool = false
        setTimeout(()=>{
            bool = true
            fn.apply(this,arguments)
        },times)
    }
    
}

防抖

防抖實(shí)現(xiàn)起來的思路是，用閉包保存執(zhí)行的函數(shù)，多次執(zhí)行的時候把上一個執(zhí)行的函數(shù)清除掉，然后再次創(chuàng)建一個新的函數(shù)。這樣在間隔時間內(nèi)還有事件觸發(fā)的話，不會執(zhí)行之前的函數(shù)，這么一來，函數(shù)真正的執(zhí)行就是最后一次事件觸發(fā)。

function debounce(fn,times){
    let timeout = null
    return function(){
        clearTimeout(timeout)
        timeout = setTimeout(()=>{
            fn.apply(this,arguments)
        },times)
    }
}

總結(jié)

以上只是很簡單的寫了一下節(jié)流和防抖的原理，在underscore.js里，實(shí)現(xiàn)起來更加復(fù)雜，但是背后的原理核心就是上邊代碼寫的。兩者都是在密集調(diào)用的過程中靈活使用setTimeout函數(shù)來對頻繁觸發(fā)的事件進(jìn)行控制和優(yōu)化。