前言：

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

（1）搜索需求

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

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

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

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

1、防抖

含義：

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

實(shí)現(xiàn)：

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

原理：

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

測試：

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

2、節(jié)流

含義：

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

實(shí)現(xiàn)：

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

原理：

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

測試：

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

3、總結(jié)

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

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

最新評論