徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

Mr_houzi 發(fā)布于2019-08-26 13:33 / 1325人閱讀

摘要：若時間差大于間隔時間，則立刻執(zhí)行一次函數(shù)。不同點函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實現(xiàn)。函數(shù)防抖關(guān)注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時間內(nèi)只執(zhí)行一次。

原博客地址，歡迎star

函數(shù)防抖和節(jié)流

函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover，input輸入框的keypress等事件在觸發(fā)時，會不斷地調(diào)用綁定在事件上的回調(diào)函數(shù)，極大地浪費資源，降低前端性能。為了優(yōu)化體驗，需要對這類事件進(jìn)行調(diào)用次數(shù)的限制。

函數(shù)防抖

在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時。

根據(jù)函數(shù)防抖思路設(shè)計出第一版的最簡單的防抖代碼：

var timer; // 維護(hù)同一個timer
function debounce(fn, delay) {
    clearTimeout(timer);
    timer = setTimeout(function(){
        fn();
    }, delay);
}

用onmousemove測試一下防抖函數(shù):

// test
function testDebounce() {
    console.log("test");
}
document.onmousemove = () => {
  debounce(testDebounce, 1000);
}

上面例子中的debounce就是防抖函數(shù)，在document中鼠標(biāo)移動的時候，會在onmousemove最后觸發(fā)的1s后執(zhí)行回調(diào)函數(shù)testDebounce；如果我們一直在瀏覽器中移動鼠標(biāo)（比如10s），會發(fā)現(xiàn)會在10 + 1s后才會執(zhí)行testDebounce函數(shù)（因為clearTimeout(timer)），這個就是函數(shù)防抖。

在上面的代碼中，會出現(xiàn)一個問題，var timer只能在setTimeout的父級作用域中，這樣才是同一個timer，并且為了方便防抖函數(shù)的調(diào)用和回調(diào)函數(shù)fn的傳參問題，我們應(yīng)該用閉包來解決這些問題。

優(yōu)化后的代碼：

function debounce(fn, delay) {
    var timer; // 維護(hù)一個 timer
    return function () {
        var _this = this; // 取debounce執(zhí)行作用域的this
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args); // 用apply指向調(diào)用debounce的對象，相當(dāng)于_this.fn(args);
        }, delay);
    };
}

測試用例：

// test
function testDebounce(e, content) {
    console.log(e, content);
}
var testDebounceFn = debounce(testDebounce, 1000); // 防抖函數(shù)
document.onmousemove = function (e) {
    testDebounceFn(e, "debounce"); // 給防抖函數(shù)傳參
}

使用閉包后，解決傳參和封裝防抖函數(shù)的問題，這樣就可以在其他地方隨便將需要防抖的函數(shù)傳入debounce了。

函數(shù)節(jié)流

每隔一段時間，只執(zhí)行一次函數(shù)。

定時器實現(xiàn)節(jié)流函數(shù)：

請仔細(xì)看清和防抖函數(shù)的代碼差異

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; // 在delay后執(zhí)行完fn之后清空timer，此時timer為假，throttle觸發(fā)可以進(jìn)入計時器
        }, delay)
    }
}

測試用例：

function testThrottle(e, content) {
    console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 1000); // 節(jié)流函數(shù)
document.onmousemove = function (e) {
    testThrottleFn(e, "throttle"); // 給節(jié)流函數(shù)傳參
}

上面例子中，如果我們一直在瀏覽器中移動鼠標(biāo)（比如10s），則在這10s內(nèi)會每隔1s執(zhí)行一次testThrottle，這就是函數(shù)節(jié)流。

函數(shù)節(jié)流的目的，是為了限制函數(shù)一段時間內(nèi)只能執(zhí)行一次。因此，定時器實現(xiàn)節(jié)流函數(shù)通過使用定時任務(wù)，延時方法執(zhí)行。在延時的時間內(nèi)，方法若被觸發(fā)，則直接退出方法。從而，實現(xiàn)函數(shù)一段時間內(nèi)只執(zhí)行一次。

根據(jù)函數(shù)節(jié)流的原理，我們也可以不依賴 setTimeout實現(xiàn)函數(shù)節(jié)流。

時間戳實現(xiàn)節(jié)流函數(shù)：

function throttle(fn, delay) {
    var previous = 0;
    // 使用閉包返回一個函數(shù)并且用到閉包函數(shù)外面的變量previous
    return function() {
        var _this = this;
        var args = arguments;
        var now = new Date();
        if(now - previous > delay) {
            fn.apply(_this, args);
            previous = now;
        }
    }
}

// test
function testThrottle(e, content) {
    console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 1000); // 節(jié)流函數(shù)
document.onmousemove = function (e) {
    testThrottleFn(e, "throttle"); // 給節(jié)流函數(shù)傳參
}

其實現(xiàn)原理，通過比對上一次執(zhí)行時間與本次執(zhí)行時間的時間差與間隔時間的大小關(guān)系，來判斷是否執(zhí)行函數(shù)。若時間差大于間隔時間，則立刻執(zhí)行一次函數(shù)。并更新上一次執(zhí)行時間。

異同比較

相同點：

都可以通過使用 setTimeout 實現(xiàn)。

目的都是，降低回調(diào)執(zhí)行頻率。節(jié)省計算資源。

不同點：

函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用clearTimeout 和 setTimeout實現(xiàn)。函數(shù)節(jié)流，在一段連續(xù)操作中，每一段時間只執(zhí)行一次，頻率較高的事件中使用來提高性能。

函數(shù)防抖關(guān)注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時間內(nèi)只執(zhí)行一次。

常見應(yīng)用場景 函數(shù)防抖的應(yīng)用場景

連續(xù)的事件，只需觸發(fā)一次回調(diào)的場景有：

搜索框搜索輸入。只需用戶最后一次輸入完，再發(fā)送請求

手機號、郵箱驗證輸入檢測

窗口大小Resize。只需窗口調(diào)整完成后，計算窗口大小。防止重復(fù)渲染。

函數(shù)節(jié)流的應(yīng)用場景

間隔一段時間執(zhí)行一次回調(diào)的場景有：

滾動加載，加載更多或滾到底部監(jiān)聽

谷歌搜索框，搜索聯(lián)想功能

高頻點擊提交，表單重復(fù)提交

文檔中出現(xiàn)的源代碼都在這里: 防抖、節(jié)流

參考資料：

淺析函數(shù)防抖與函數(shù)節(jié)流
JavaScript專題系列-防抖和節(jié)流
7分鐘理解JS的節(jié)流、防抖及使用場景
防抖、節(jié)流

可能這些參考資料中有某些錯誤，但是表示感謝，博客中有些內(nèi)容用了里面的資料。

GPU云服務(wù)器云服務(wù)器函數(shù)節(jié)流 js函數(shù)節(jié)流 VUE防抖與節(jié)流函數(shù)中定義函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109053.html

發(fā)表評論

登陸后可評論

0條評論

Mr_houzi

男|高級講師

我要關(guān)注我要私信

TA的文章

sparkedhost：11月促銷，首月6.5折，AMD Ryzen高性能VPS首月$4起，英特爾c

閱讀 916·2021-11-15 17:58
【普通人VS程序員】電腦還可以這樣關(guān)機，神操作，學(xué)到了學(xué)到了~（收藏起來慢慢學(xué)）

閱讀 3757·2021-11-12 10:36
虛擬云主機如何設(shè)置方法-虛擬主機和云主機改如何選擇？

閱讀 3874·2021-09-22 16:06
科技不總是冷冰冰，智能便攜打印機讓文字更有溫度!——嵌入式功能實現(xiàn)篇

閱讀 1038·2021-09-10 10:50
基于 vw 單位的移動端適配方案學(xué)習(xí)筆記

閱讀 1378·2019-08-30 11:19
畫三角形

閱讀 3357·2019-08-29 16:26
webstorm和node配合使用的一些小技巧之External tools

閱讀 1008·2019-08-29 10:55
【從零入門系列-5】Spring Boot 之前端展示

閱讀 3396·2019-08-26 13:48

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

相關(guān)文章

詳談js防抖和節(jié)流

函數(shù)防抖和節(jié)流

JavaScript防抖和節(jié)流

函數(shù)的防抖和節(jié)流是個啥？？？

JS簡單實現(xiàn)防抖和節(jié)流

發(fā)表評論

0條評論

Mr_houzi

男|高級講師

TA的文章

sparkedhost：11月促銷，首月6.5折，AMD Ryzen高性能VPS首月$4起，英特爾c

【普通人VS程序員】電腦還可以這樣關(guān)機，神操作，學(xué)到了學(xué)到了~（收藏起來慢慢學(xué)）

虛擬云主機如何設(shè)置方法-虛擬主機和云主機改如何選擇？

科技不總是冷冰冰，智能便攜打印機讓文字更有溫度!——嵌入式功能實現(xiàn)篇

基于 vw 單位的移動端適配方案學(xué)習(xí)筆記

畫三角形

webstorm和node配合使用的一些小技巧之External tools

【從零入門系列-5】Spring Boot 之前端展示

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！