前言

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

防抖

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

防抖主要是通過定時器來實現(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í)行的延遲時間，單位：毫秒。每一次觸發(fā)事件時，會先判斷一下 timer 的值是否賦值了定時器，如果賦值了，就直接清除定時器。然后在執(zhí)行下面的代碼。

節(jié)流

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

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

• 使用定時器實現(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ā)事件后，會直接重新賦值 timer 為一個定時器，到時間后執(zhí)行事件處理程序，重新賦值 timer 為 null，在這期間，因為 timer 的值是一個定時器，if 判斷是不會執(zhí)行的，必須重新賦值為 null 后才會重新執(zhí)行。

• 時間戳的方式

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ā)事件后，定義開始觸發(fā)事件的時間 start 為零，獲取當前的時間戳賦值給 current，判斷當前時間與初始時間是否超過間隔，如果超過了就把當前這個時間戳賦值給 start，然后執(zhí)行事件處理程序。（因為初始時間為零，所以第一次觸發(fā)會直接執(zhí)行）

總結

防抖：適用于需要等待用戶停止操作后再執(zhí)行的場景，比如搜索框輸入文本后請求接口。

節(jié)流：適用于需要限制函數(shù)執(zhí)行頻率的場景，比如滾動事件中的懶加載。

到此這篇關于JavaScript中防抖和節(jié)流的原理和區(qū)別詳解的文章就介紹到這了,更多相關JavaScript防抖和節(jié)流內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論