前言：

作為前端開發(fā)中會以下兩種需求

（1）搜索需求

搜索的邏輯就是監(jiān)聽用戶輸入事件，等用戶輸入完成之后把數(shù)據(jù)發(fā)送給后端，后端返回匹配數(shù)據(jù)，前端顯示數(shù)據(jù)到頁面。如果只要用戶輸入就發(fā)請求，這樣會給后端造成請求壓力，需要控制請求的頻率。

（2）頁面無限加載數(shù)據(jù)

頁面無限加載數(shù)據(jù)的邏輯就是監(jiān)聽用戶用戶滾動事件，在用戶滾動的過程中，去請求下一頁的數(shù)據(jù)來顯示到頁面。，那么只要滾動就去發(fā)請求，同樣會造成后端請求壓力，需要控制請求的頻率。

以上兩種看起來都是控制請求頻率的問題，但是需求有細(xì)微的差別：搜索是用戶在輸入中輸入多次，只有等用戶短暫停止輸入之后，就去發(fā)送請求，此時就需要防抖去實現(xiàn)。滾動加載數(shù)據(jù)是在用戶滾動頁面的過程中每間隔一段時間就去請求，即使用戶一直滾動，都會去請求，而不是等用戶停止?jié)L動才去請求，此時就需要使用節(jié)流去實現(xiàn)。

1、防抖

含義：

簡單的理解方式就是：用戶多次觸發(fā)事件，在用戶一直觸發(fā)事件中，事件不會執(zhí)行，只有在用戶停止觸發(fā)事件一段時間之后再執(zhí)行這個事件一次。

實現(xiàn)：

// @fn 是對應(yīng)請求數(shù)據(jù)
    // @ms 是用戶多次觸發(fā)事件的時間間隔 是一個毫秒數(shù)
    function debounce(fn, ms) {
        let timeout = null
        return function() {
            clearTimeout(timeout)
            timeout = setTimeout(() => {
                fn.apply(this, arguments)
            }, ms)
        }
    }

原理：

用戶每一次觸發(fā)事件都會延遲執(zhí)行，在設(shè)置延遲定時器執(zhí)之前都會把上一次延遲定時器清除，最終只有用戶連續(xù)觸發(fā)這個事件的間隔時間超出我們設(shè)置的參數(shù)ms毫秒之后,該事件才會觸發(fā)一次

測試：

<input id="searchInput"/>
    function getData(){
        console.log('發(fā)送請求...')
    }
    document.getElementById('searchInput').oninput = debounce(getData, 800)
    // 如果用戶一直在輸入，是不會發(fā)送請求
    // 只有用戶連續(xù)輸入時間間隔超過800ms之后才會請求一次數(shù)據(jù)，也就是用戶在800ms內(nèi)沒有輸入才會去請求數(shù)據(jù)

2、節(jié)流

含義：

簡單的理解方式就是：用戶多次觸發(fā)事件，在用戶一直觸發(fā)事件過程中事件會每間隔一段時間執(zhí)行一次，會執(zhí)行多次。

實現(xiàn)：

    // @fn 是對應(yīng)請求數(shù)據(jù)
    // @ms 是用戶多次觸發(fā)事件的時間間隔 是一個毫秒數(shù)
     function throttle(fn, ms){
        let flag = true
        return function(){
            if(!flag) return
            flag = false
            setTimeout(()=>{
                fn.apply(this, arguments)
                flag = true
            }, ms)
        }
    }

原理：

用戶每一次觸發(fā)事件都會設(shè)置一個延遲定時器，但是如果已經(jīng)設(shè)置了延遲定時器就會等上一次延遲定時器執(zhí)行之后才會開啟下一個定時器，這樣用戶一直觸發(fā)事件，事件會每間隔一段時間執(zhí)行一次

測試：

function getData(){
        console.log('發(fā)送請求...')
    }
    window.onscroll = throttle(getData, 800)
    // 用戶在滾動的過程中，會間隔去請求數(shù)據(jù)

3、總結(jié)

節(jié)流和防抖本質(zhì)上都是控制事件執(zhí)行的頻率，但是觸發(fā)事件的時機本質(zhì)上有區(qū)別，防抖是在用戶多次觸發(fā)事件，當(dāng)用戶停止觸發(fā)事件，將事件執(zhí)行一次；節(jié)流是用戶多次觸發(fā)事件，會在多次觸發(fā)的過程中，間隔執(zhí)行事件。

到此這篇關(guān)于關(guān)于JavaScript防抖與節(jié)流的區(qū)別與實現(xiàn)的文章就介紹到這了,更多相關(guān)防抖與節(jié)流的區(qū)別與實現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！