前端優(yōu)化 —— 函數(shù)的節(jié)流和防抖

ralap 發(fā)布于2019-08-23 12:18 / 759人閱讀

摘要：文件為函數(shù)要傳入的參數(shù)返回事件處理函數(shù)添加事件監(jiān)聽節(jié)流函數(shù)一般用于事件的情況較多，因?yàn)檫@些事件的觸發(fā)是連續(xù)性的，需要在一個(gè)時(shí)間間隔內(nèi)只觸發(fā)一次。

閱讀原文

前言

在前端開發(fā)當(dāng)中我們經(jīng)常會(huì)綁定一些事件觸發(fā)的某些程序執(zhí)行，有時(shí)這些事件會(huì)連續(xù)觸發(fā)，如瀏覽器窗口 scroll、resize，輸入框的 keyup、input，以及 click 事件在連續(xù)點(diǎn)擊時(shí)連續(xù)發(fā)送請求等等，這些情況有些會(huì)嚴(yán)重影響前端性能，有些會(huì)增加服務(wù)器壓力，使用戶體驗(yàn)大打折扣，而函數(shù)節(jié)流和防抖就是為了解決這樣的問題。

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

函數(shù)節(jié)流：當(dāng)持續(xù)發(fā)生事件時(shí)，保證在一個(gè)固定的時(shí)間間隔只執(zhí)行一次真正的事件處理程序，通俗的說就像 “節(jié)流” 的名字一樣，打開水龍頭時(shí)要秉承勤儉節(jié)約的原則，把閥門關(guān)小，最好是達(dá)到在固定間隔內(nèi)水一滴一滴的往下流。

1、節(jié)流函數(shù)的時(shí)序圖

從圖中可以看出，連續(xù)觸發(fā)事件時(shí)，真正執(zhí)行事件處理程序的間隔是固定的，多次觸發(fā)，也只會(huì)在某一個(gè)時(shí)間間隔內(nèi)觸發(fā)一次，由于事件處理函數(shù)內(nèi)部執(zhí)行邏輯各不相同，我們就封裝一版可通用的節(jié)流函數(shù)。

2、節(jié)流函數(shù)的封裝

// 文件：throtter.js
// 節(jié)流函數(shù)
const throtter = (func, delay = 60) => {
    // 鎖的標(biāo)識(shí)
    let lock = false;

    // 返回一個(gè)事件處理函數(shù)
    return (...args) => {
        // 如果 lock 為 true 則跳出
        if (lock) return;

        // 執(zhí)行函數(shù)并更改鎖的狀態(tài)
        func(...args);
        lock = true;

        // 添加定時(shí)器，在到達(dá)時(shí)間間隔時(shí)重置鎖的狀態(tài)
        setTimeout(() => lock = false, delay);
    }
}

throtter 函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)為在事件觸發(fā)時(shí)真正要執(zhí)行的函數(shù)，第二個(gè)參數(shù)為定義的間隔時(shí)間，在函數(shù)執(zhí)行時(shí)定義了 lock 的初始值，通過閉包返回一個(gè)函數(shù)作為事件處理函數(shù)，在返回的函數(shù)內(nèi)部判斷 lock 狀態(tài)并確定執(zhí)行真正的函數(shù) func 還是跳出，每次執(zhí)行 func 后會(huì)更改 lock 狀態(tài)，通過定時(shí)器在規(guī)定的時(shí)間間隔內(nèi)重置 lock，這就是函數(shù)節(jié)流的原理。

3、驗(yàn)證節(jié)流函數(shù)

// 文件：throtter-test.js
// 使用節(jié)流函數(shù)
document.addEventListener("scroll", throtter(console.log));

上面我們給 document 對(duì)象添加了滾動(dòng)事件，并不斷的打印事件對(duì)象，事件處理函數(shù)的默認(rèn)參數(shù)為事件對(duì)象，從執(zhí)行效果應(yīng)該可以看出，平均每 60ms 才會(huì)觸發(fā)一次事件，達(dá)到了優(yōu)化性能的目的，如果想讓真正執(zhí)行的函數(shù) func 傳入更多的參數(shù)，只需如下處理。

// 文件：throtter-test.js
// a b 為函數(shù)要傳入的參數(shù)
let a = 1, b = 2;

// 返回事件處理函數(shù)
const func = throtter(console.log);

// 添加事件監(jiān)聽
document.addEventListener("scroll", e => func(e, a, b));

節(jié)流函數(shù)一般用于 scroll、resize 事件的情況較多，因?yàn)檫@些事件的觸發(fā)是連續(xù)性的，需要在一個(gè)時(shí)間間隔內(nèi)只觸發(fā)一次。

函數(shù)防抖 debounce

函數(shù)防抖：當(dāng)持續(xù)發(fā)生事件時(shí)，事件只在上一次觸發(fā)后的一段時(shí)間內(nèi)沒再觸發(fā)事件，才會(huì)真正的執(zhí)行事件處理邏輯，如果每兩次觸發(fā)的間隔小于這個(gè)時(shí)間，則不執(zhí)行事件邏輯。

1、防抖函數(shù)的時(shí)序圖

從圖中可以看出，連續(xù)觸發(fā)事件時(shí)并沒有執(zhí)行事件處理函數(shù)，只有在某一階段連續(xù)觸發(fā)后的最后一次才執(zhí)行，也就是上一次觸發(fā)的時(shí)間間隔要大于設(shè)定值才執(zhí)行，同樣的，事件處理函數(shù)內(nèi)部執(zhí)行邏輯各不相同，我們就封裝一版可通用的防抖函數(shù)。

2、防抖函數(shù)的封裝

// 文件：debounce.js
// 防抖函數(shù)
const dobounce = (func, delay = 300, timer = null) => {
    return (...args) => {
        // 清除定時(shí)器
        clearInterval(timer);

        // 在定時(shí)器到時(shí)后執(zhí)行事件處理函數(shù)
        timer = setTimeout(() => func(...args), delay);
    }
}

dobounce 函數(shù)有三個(gè)參數(shù)，第一個(gè)參數(shù)為在事件觸發(fā)時(shí)真正要執(zhí)行的函數(shù)，第二個(gè)參數(shù)為執(zhí)行事件的延遲時(shí)間，第三個(gè)參數(shù)為定時(shí)器 ID 的初始值，執(zhí)行 dobounce 通過閉包返回了事件處理函數(shù)，在處理函數(shù)內(nèi)部先清除定時(shí)器，然后定義定時(shí)器并將 ID 賦值給 timer，如果事件連續(xù)觸發(fā)，則會(huì)不斷的清除定時(shí)器，直到有一次觸發(fā)間隔超過了設(shè)定延時(shí)時(shí)間 delay，才會(huì)真正執(zhí)行 func。

3、驗(yàn)證防抖函數(shù)





    
    函數(shù)防抖

// 文件：debounce-test.js
// 使用防抖函數(shù)
let ipt = document.querySelector("#ipt");

// 添加事件監(jiān)聽
ipt.addEventListener("keyup", debounce(console.log));

上面的功能跟 throtter 類似，真正執(zhí)行事件處理函數(shù)時(shí)打印事件對(duì)象，通過驗(yàn)證，連續(xù)輸入觸發(fā) keyup 事件，上一次觸發(fā)和下一次觸發(fā)間隔時(shí)間必須大于 300ms 才會(huì)執(zhí)行打印事件對(duì)象的邏輯，如果想傳入多個(gè)參數(shù)套路相同。

// 文件：debounce-test.js
// 獲取 dom 元素
let ipt = document.querySelector("#ipt");

// a b 為函數(shù)要傳入的參數(shù)
let a = 1, b = 2;

// 返回事件處理函數(shù)
const func = debounce(console.log);

// 添加事件監(jiān)聽
ipt.addEventListener("keyup", e => func(e, a, b));

防抖函數(shù)一般用于輸入框事件，常用場景就是搜索或查詢，如果不使用防抖會(huì)連續(xù)發(fā)送請求，增加服務(wù)器的壓力，使用防抖后，會(huì)在用戶輸入要查詢的關(guān)鍵詞后才發(fā)送請求，這也更符合用戶的習(xí)慣，例如百度搜索，就是這樣實(shí)現(xiàn)的。

總結(jié)

“節(jié)流” 和 “防抖” 是前端在項(xiàng)目中經(jīng)常使用的優(yōu)化手段，代碼雖然不多，但是確是前端面試 “出鏡率” 非常高的知識(shí)點(diǎn)，從而能看出它們的重要性，所以建議前端同學(xué)們一定要知道，并能手寫，這是 “一箭雙雕” 的事，可以用來通過面試，也可以因?yàn)楣ぷ髦杏龅街苯泳蛯懚岣吖ぷ餍省?/p>

GPU云服務(wù)器云服務(wù)器 VUE防抖與節(jié)流函數(shù)節(jié)流 js函數(shù)節(jié)流函數(shù)優(yōu)化

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ralap

男|高級(jí)講師

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

TA的文章

動(dòng)力節(jié)點(diǎn)JavaNIO教程，輕松攻破Java NIO技術(shù)壁壘

閱讀 2931·2021-11-23 09:51
使用Python控制手機(jī)（一）

閱讀 3178·2021-11-12 10:36
搜狗：與騰訊合并后，搜索和輸入法將保持搜狗品牌運(yùn)營

閱讀 3214·2021-09-27 13:37
云基：洛杉磯CN2 GIA高防服務(wù)器,50-500Gbps防御/無視CC,快速上架

閱讀 3168·2021-08-17 10:15
不能使用for循環(huán)，傳入n和m, 生成一個(gè)長度為n，每一項(xiàng)都是m的數(shù)組

閱讀 2596·2019-08-30 15:55
CSS居中方法總結(jié)

閱讀 2757·2019-08-30 13:07
js執(zhí)行會(huì)阻塞DOM樹的解析和渲染，那么css加載會(huì)阻塞DOM樹的解析和渲染嗎

閱讀 800·2019-08-29 16:32
CSS的inline、block與inline-block

閱讀 2655·2019-08-26 12:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

前端優(yōu)化 —— 函數(shù)的節(jié)流和防抖

相關(guān)文章

JS之節(jié)流和防抖

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

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

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

**關(guān)于js節(jié)流函數(shù)throttle和防抖動(dòng)debounce**

發(fā)表評(píng)論

0條評(píng)論

ralap

男|高級(jí)講師

TA的文章

動(dòng)力節(jié)點(diǎn)JavaNIO教程，輕松攻破Java NIO技術(shù)壁壘

使用Python控制手機(jī)（一）

搜狗：與騰訊合并后，搜索和輸入法將保持搜狗品牌運(yùn)營

云基：洛杉磯CN2 GIA高防服務(wù)器,50-500Gbps防御/無視CC,快速上架

不能使用for循環(huán)，傳入n和m, 生成一個(gè)長度為n，每一項(xiàng)都是m的數(shù)組

CSS居中方法總結(jié)

js執(zhí)行會(huì)阻塞DOM樹的解析和渲染，那么css加載會(huì)阻塞DOM樹的解析和渲染嗎

CSS的inline、block與inline-block

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

前端優(yōu)化 —— 函數(shù)的節(jié)流和防抖

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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