<!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)無任何更改操作一秒后進(jìn)行保存

三、節(jié)流

控制事件發(fā)生的頻率從而達(dá)到減少一段時間內(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)，默認(rèn)為開啟
        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>

運行效果：