之前項(xiàng)目中為了提高性能防止某個(gè)事件頻繁觸發(fā)，使用過(guò)節(jié)流和防抖，但是沒(méi)有總結(jié)過(guò)，今天針對(duì)節(jié)流和防抖總結(jié)一下使用經(jīng)驗(yàn)

你可以把節(jié)流理解成防抖的升級(jí)版，節(jié)流是在防抖的基礎(chǔ)上限制代碼的執(zhí)行次數(shù)
防抖和節(jié)流的作用：都是為了避免一段代碼高頻率無(wú)意義的觸發(fā)，減少瀏覽器或者服務(wù)器的負(fù)擔(dān)
防抖和節(jié)流的區(qū)別：
防抖：防止代碼多頻次執(zhí)行造成頁(yè)面抖動(dòng)，在一定時(shí)間內(nèi)，代碼多次觸發(fā)會(huì)銷毀之前的執(zhí)行過(guò)程
節(jié)流：在一定時(shí)間內(nèi)，代碼一旦執(zhí)行就不能再重復(fù)執(zhí)行
防抖和節(jié)流的使用場(chǎng)景：
防抖：使用場(chǎng)景有很多，例如滾動(dòng)頁(yè)面加載頁(yè)面內(nèi)容，拖動(dòng)div修改div的位置，拖動(dòng)div修改div的大小等
節(jié)流：比如請(qǐng)求提交，點(diǎn)擊按鈕時(shí)如果頻繁點(diǎn)擊會(huì)造成多次相同的請(qǐng)求，沒(méi)有意義而且對(duì)后臺(tái)壓力也很大，這時(shí)就需要節(jié)流，頻繁點(diǎn)擊無(wú)法多次觸發(fā)事件，事件一旦執(zhí)行無(wú)法再次執(zhí)行
防抖和節(jié)流的實(shí)現(xiàn)原理：都是操作延時(shí)器，把運(yùn)行代碼放到延時(shí)器中，反復(fù)執(zhí)行之前關(guān)閉之前的延時(shí)器，只不過(guò)節(jié)流在這基礎(chǔ)上有添加了一旦代碼執(zhí)行就不能在執(zhí)行前再次觸發(fā)

防抖

function debounce(fn,delay){
    let timer = null
    return function(){
        clearTimeout(timer)
        timer = setTimeout(function(){
            fn.aplly(this,arguments)
        },delay)
    }
}

function test(){
    console.log("防抖")
}

window.addEventListener("scroll",debounce(test,500))

這段代碼中使用了一個(gè)閉包，將timer封裝到debounce函數(shù)內(nèi)，返回的函數(shù)在執(zhí)行前會(huì)銷毀之前的延時(shí)器，阻止了之前的代碼執(zhí)行并設(shè)置重新執(zhí)行

節(jié)流

function debounce(fn,delay){
    let isRuning = false
    return function(){
        if(isRuning) return;
        clearTimeout(timer)
        isRuning = true
        timer = setTimeout(function(){
            fn.aplly(this,arguments)
            isRuning = false
        },delay)
    }
}

function test(){
    console.log("節(jié)流")
}

window.addEventListener("scroll",debounce(test,500))

節(jié)流是在防抖的基礎(chǔ)上又加了一個(gè)開關(guān)，作用是保證代碼一旦執(zhí)行了就不能再被觸發(fā)
其實(shí)也可以像下面這樣寫

function debounce(fn,delay){
    let isRuning = false
    return function(){
        if(isRuning) return;
        isRuning = true
        fn.aplly(this,arguments)
        isRuning = false
    }
}

function test(){
    console.log("節(jié)流")
}

window.addEventListener("scroll",debounce(test,500))

這段代碼也能起到節(jié)流的作用
注意：如果test函數(shù)是一個(gè)ajax請(qǐng)求，那么isRuning=false需要在ajax請(qǐng)求結(jié)束后關(guān)閉，那test可能就需要一個(gè)回調(diào)函數(shù)了，或者用promise的方式去做

最后，防抖和節(jié)流在實(shí)際開發(fā)中不經(jīng)常用，但是一旦用到他對(duì)代碼性能的提升還是很有意義的，有很多庫(kù)也封裝了防抖函數(shù)，比如lodash中的debounce方法，感興趣的朋友可以到lodash官網(wǎng)去看文檔,最重要的是記住防抖的作用是防止一段代碼高頻次無(wú)意義的執(zhí)行，只要能夠?qū)崿F(xiàn)目的，過(guò)程采用什么形式就根據(jù)個(gè)人的喜好去實(shí)現(xiàn)就好了，沒(méi)必要拘泥于上訴的方式