javascript的防抖和節(jié)流你了解嗎

更新時間：2022年01月24日 11:48:29 作者：Cirrod

這篇文章主要為大家介紹了javascript的防抖和節(jié)流，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

一：為什么需要防抖與節(jié)流

防抖和節(jié)流都是為了解決短時間內(nèi)大量觸發(fā)某函數(shù)或者事件而導(dǎo)致的性能問題，比如在

1.用戶體驗上，觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死，卡頓的現(xiàn)象

2.服務(wù)器上：加重服務(wù)器壓力

二：防抖

防抖是當(dāng)事件或函數(shù)被觸發(fā)后，延遲n秒后在執(zhí)行回調(diào)，如果在這n秒內(nèi)事件或函數(shù)又被觸發(fā)，則重新計時，直到n秒內(nèi)沒有觸發(fā)事件或函數(shù)，則執(zhí)行回調(diào)函數(shù)

圖文解釋：

（回城的時間就相當(dāng)于延遲時間，如果在回城的時間內(nèi)再次觸發(fā)回城則重新倒計時回城時間）

案例：表單輸入框事件

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <input type="text" class="serach">
    <script>
        let serach = document.getElementsByClassName('serach')[0]
            // console.log(serach);
        serach.addEventListener('input', function() {
            console.log('向后端發(fā)起了請求！');
        })
    </script>
</body>
 
</html>

運行：

可以看出當(dāng)我每次輸入一個數(shù)字的時候都發(fā)起了請求，這是不符合項目要求和這非常消耗服務(wù)器的性能，我們應(yīng)該在用戶在輸入內(nèi)容后的一段時間內(nèi)如果用戶不再輸入內(nèi)容再發(fā)起請求，用戶如果在這一段時間內(nèi)再次輸入，則繼續(xù)等待用戶在一段時間內(nèi)不再輸入內(nèi)容后再發(fā)起請求。

使用防抖優(yōu)化：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <input type="text" class="serach">
    <script>
        let serach = document.getElementsByClassName('serach')[0]
            // console.log(serach);
        let timer = null; //聲明一個用于防抖的定時器變量timer
        serach.addEventListener('input', function() {
            clearTimeout(timer) //如果在定時器的時間間隔內(nèi)再次觸發(fā)事件則清除定時器，重新執(zhí)行新的定時器函數(shù)
                // 定時器函數(shù)
            timer = setTimeout(function() {
                console.log('向后端發(fā)起了請求！');
            }, 500)
 
        })
    </script>
</body>
 
</html>

運行：

如果在500毫秒內(nèi)調(diào)用多次，只會執(zhí)行最后一次

可以看出在輸入完內(nèi)容后的500毫秒后才發(fā)起請求

防抖的應(yīng)用場景：

1.用戶在輸入框連續(xù)輸入一串字符時，可以通過放抖策略，只在輸入完后，才執(zhí)行查詢的請求，這樣可以有效減少請求次數(shù)，節(jié)約請求資源。（也可以用節(jié)流）

2.登錄、發(fā)短信等按鈕避免用戶點擊太快，以致于發(fā)送了多次請求，需要防抖

3.調(diào)整瀏覽器窗口大小時，resize 次數(shù)過于頻繁，造成計算過多，此時需要一次到位，就用到了防抖

4.文本編輯器實時保存，當(dāng)無任何更改操作一秒后進行保存

三、節(jié)流

控制事件發(fā)生的頻率從而達到減少一段時間內(nèi)事件的觸發(fā)頻率，如控制為1s發(fā)生一次，甚至1分鐘發(fā)生一次。

圖文解釋：

（當(dāng)玩射擊游戲時，無論你手點的有多快射出的彈還是有規(guī)律的發(fā)出（比如0.5發(fā)出一個彈））

案例：獲取鼠標(biāo)的最終坐標(biāo)

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .app {
            width: 800px;
            height: 800px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    <div class="app">
    </div>
    <script>
        let app = document.getElementsByClassName('app')[0]
        app.addEventListener('mousemove', function(e) {
            console.log(`x坐標(biāo)${e.pageX},y坐標(biāo)${e.pageY}`);
        })
    </script>
</body>
 
</html>

運行：

可以看出每次鼠標(biāo)移動都執(zhí)行函數(shù)，大大消耗性能，我們可以利用節(jié)流策略，一秒內(nèi)只執(zhí)行一次來節(jié)流

節(jié)流優(yōu)化：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .app {
            width: 800px;
            height: 800px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    <div class="app">
    </div>
    <script>
        let app = document.getElementsByClassName('app')[0]
        let timer = true; //定義一個節(jié)流閥變量來控制節(jié)流閥為關(guān)閉還是開啟狀態(tài)，默認為開啟
        app.addEventListener('mousemove', function(e) {
            if (!timer) {
                return //判斷節(jié)流閥是否關(guān)閉，如果節(jié)流閥還是false（關(guān)閉狀態(tài)），則證明上次的函數(shù)未執(zhí)行完，直接退出函數(shù)
            }
            timer = false; //設(shè)置節(jié)流閥為false，如果定時器函數(shù)沒有設(shè)置為true，則定時器函數(shù)沒執(zhí)行，節(jié)流閥一直為關(guān)(false)
            setTimeout(function() {
                console.log(`x坐標(biāo)${e.pageX},y坐標(biāo)${e.pageY}`)
                timer = true //定時器函數(shù)已經(jīng)執(zhí)行，設(shè)置節(jié)流閥為true
            }, 500)
 
        })
    </script>
</body>
 
</html>

運行效果：