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

資訊專欄INFORMATION COLUMN

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

ralap / 803人閱讀

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

閱讀原文


前言

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

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

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

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

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

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

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

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

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

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

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

上面我們給 document 對象添加了滾動事件，并不斷的打印事件對象，事件處理函數(shù)的默認參數(shù)為事件對象，從執(zhí)行效果應(yīng)該可以看出，平均每 60ms 才會觸發(fā)一次事件，達到了優(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 事件的情況較多，因為這些事件的觸發(fā)是連續(xù)性的，需要在一個時間間隔內(nèi)只觸發(fā)一次。

函數(shù)防抖 debounce

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

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

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

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

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

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

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




    
    函數(shù)防抖


    


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

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

上面的功能跟 throtter 類似，真正執(zhí)行事件處理函數(shù)時打印事件對象，通過驗證，連續(xù)輸入觸發(fā) keyup 事件，上一次觸發(fā)和下一次觸發(fā)間隔時間必須大于 300ms 才會執(zhí)行打印事件對象的邏輯，如果想傳入多個參數(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ù)一般用于輸入框事件，常用場景就是搜索或查詢，如果不使用防抖會連續(xù)發(fā)送請求，增加服務(wù)器的壓力，使用防抖后，會在用戶輸入要查詢的關(guān)鍵詞后才發(fā)送請求，這也更符合用戶的習(xí)慣，例如百度搜索，就是這樣實現(xiàn)的。

總結(jié)

“節(jié)流” 和 “防抖” 是前端在項目中經(jīng)常使用的優(yōu)化手段，代碼雖然不多，但是確是前端面試 “出鏡率” 非常高的知識點，從而能看出它們的重要性，所以建議前端同學(xué)們一定要知道，并能手寫，這是 “一箭雙雕” 的事，可以用來通過面試，也可以因為工作中遇到直接就寫而提高工作效率。

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

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

相關(guān)文章

  • JS之節(jié)流和防抖

    摘要：節(jié)流在指定時間之內(nèi)，讓函數(shù)只觸發(fā)一次。防抖對于一定時間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次?？偨Y(jié)以上只是很簡單的寫了一下節(jié)流和防抖的原理，在里，實現(xiàn)起來更加復(fù)雜，但是背后的原理核心就是上邊代碼寫的。 概述 在平時的開發(fā)中，經(jīng)常會聽到兩個差不多很相近的詞。節(jié)流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優(yōu)化方案。 節(jié)流：在指定時間之內(nèi)，讓函數(shù)只觸發(fā)一次。 防...

    fevin 評論0 收藏0

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

    摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時，它會清除前一次的定時器并設(shè)置另一個。然而，如果前一個定時器尚未執(zhí)行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析函數(shù)節(jié)流函數(shù)防抖實現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時候都屬于用戶，有些情況下會產(chǎn)生問題： 向后臺發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...

    didikee 評論0 收藏0

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

    摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時，它會清除前一次的定時器并設(shè)置另一個。然而，如果前一個定時器尚未執(zhí)行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析函數(shù)節(jié)流函數(shù)防抖實現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時候都屬于用戶，有些情況下會產(chǎn)生問題： 向后臺發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...

    huaixiaoz 評論0 收藏0

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

    摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時，它會清除前一次的定時器并設(shè)置另一個。然而，如果前一個定時器尚未執(zhí)行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析函數(shù)節(jié)流函數(shù)防抖實現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時候都屬于用戶，有些情況下會產(chǎn)生問題： 向后臺發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...

    CHENGKANG 評論0 收藏0

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

    摘要：主要實現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調(diào)用方法打時間進行比較，用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說，直奔主題。 什么是throttle和debounce？ 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

    張紅新 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<