快捷導(dǎo)航

JavaScript中防抖和節(jié)流的原理和區(qū)別詳解

更新時(shí)間：2023年09月18日 09:05:51 作者：念舊的俗人

JavaScript 中,防抖和節(jié)流是一種用于優(yōu)化事件處理函數(shù)調(diào)用頻率的技術(shù),防抖和節(jié)流的目的都是為了避免頻繁地觸發(fā)事件處理函數(shù),從而減少瀏覽器和服務(wù)器的負(fù)擔(dān),本文將給大家介紹一下JavaScript中防抖和節(jié)流的原理和區(qū)別,需要的朋友可以參考下

前言

JavaScript 中，防抖和節(jié)流是一種用于優(yōu)化事件處理函數(shù)調(diào)用頻率的技術(shù)。防抖和節(jié)流的目的都是為了避免頻繁地觸發(fā)事件處理函數(shù)，從而減少瀏覽器和服務(wù)器的負(fù)擔(dān)。

防抖

防抖（Debounce）的原理是在事件被觸發(fā)后，等待一定的時(shí)間間隔（比如500ms），如果在這個(gè)時(shí)間間隔內(nèi)沒(méi)有再次觸發(fā)該事件，才會(huì)執(zhí)行事件處理函數(shù)。如果在這個(gè)時(shí)間間隔內(nèi)又觸發(fā)了該事件，那么就重新等待新的時(shí)間間隔。

防抖主要是通過(guò)定時(shí)器來(lái)實(shí)現(xiàn)，如下：

function debounce(fun, time) {
    let timer
    return function () {
        let that = this
        if (timer) clearTimeout(timer)
        timer = setTimeout(function () {
            fun.call(that)
        }, time)
    }
}

以上代碼中，fun 是事件處理程序，time 是事件執(zhí)行的延遲時(shí)間，單位：毫秒。每一次觸發(fā)事件時(shí)，會(huì)先判斷一下 timer 的值是否賦值了定時(shí)器，如果賦值了，就直接清除定時(shí)器。然后在執(zhí)行下面的代碼。

節(jié)流

節(jié)流（Throttle）的原理是在事件被觸發(fā)后，首先執(zhí)行事件處理函數(shù)，然后設(shè)置一個(gè)時(shí)間間隔（比如500ms），在這個(gè)時(shí)間間隔內(nèi)不再觸發(fā)該事件。只有等待這個(gè)時(shí)間間隔過(guò)去后，才會(huì)重新觸發(fā)事件，并再次執(zhí)行事件處理函數(shù)。

節(jié)流的實(shí)現(xiàn)方式有兩種：

使用定時(shí)器實(shí)現(xiàn)

function throttlea(fun, t) {
    let timer = null
    return function () {
        let that = this
        if (!timer) {
            timer = setTimeout(function () {
                fun.call(that)
                timer = null
            }, t)
        }
    }
}

以上代碼中，觸發(fā)事件后，會(huì)直接重新賦值 timer 為一個(gè)定時(shí)器，到時(shí)間后執(zhí)行事件處理程序，重新賦值 timer 為 null，在這期間，因?yàn)?timer 的值是一個(gè)定時(shí)器，if 判斷是不會(huì)執(zhí)行的，必須重新賦值為 null 后才會(huì)重新執(zhí)行。

時(shí)間戳的方式

function throttle(fun, time) {
    let start = 0
    return function () {
        let that = this
        let current = Date.now()
        if (current - start >= time) {
            fun.call(that)
            start = current
        }
    }
}

以上代碼中，觸發(fā)事件后，定義開(kāi)始觸發(fā)事件的時(shí)間 start 為零，獲取當(dāng)前的時(shí)間戳賦值給 current，判斷當(dāng)前時(shí)間與初始時(shí)間是否超過(guò)間隔，如果超過(guò)了就把當(dāng)前這個(gè)時(shí)間戳賦值給 start，然后執(zhí)行事件處理程序。（因?yàn)槌跏紩r(shí)間為零，所以第一次觸發(fā)會(huì)直接執(zhí)行）