小菊花課堂之JS的防抖與節流

時間 2019-11-10

原文原文鏈接

前言

陸游有一首《冬夜讀書示子聿》——「古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。」，其中的意思想必你們都能明白，在學習或工做中，不斷的印證着這首詩的內涵。因此，又有了此篇小菊花文章。javascript

詳解

在前端開發中，咱們常常會碰到一些會持續觸發的時間，好比輸入框校驗、resize、scroll、mousemove 等操做時，若是事件觸發的頻率無限制，會家中瀏覽器的負擔，致使用戶體驗很是糟糕。
咱們能夠先看看持續觸發過程當中頻繁執行函數是怎樣的狀況css

<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script>
    var num = 1;
    var content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };

    content.onmousemove = count;
</script>

在上面代碼中，div 元素綁定了 mousemove 事件，當鼠標在 div（灰色）區域中移動的時候會持續地去觸發該事件致使頻繁執行函數。html

再看一個例子前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沒有防抖</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = function () {
            //模擬ajax請求
            function ajax(content) {
                console.log('ajax request ' + content)
            }
            let inputNormal = document.getElementById('normal');

            inputNormal.addEventListener('keyup', function (e) {
                ajax(e.target.value)
            })
        }
    </script>
</head>
<body>
    <div>
        1.沒有防抖的input：
        <input type="text" name="normal" id="normal">
    </div>
</body>
</html>

在上面代碼中，會監聽鍵盤輸入事件，只要按下鍵盤，就會觸發此次模擬的ajax請求，不只浪費了資源，並且在實際應用中，用戶也是須要輸入完整字符後，才請求。java

防抖(debounce)

簡單來講就是防止抖動，指觸發事件在 n 秒內函數只能執行一次，若是在 n 秒內又觸發了事件，則會從新計算函數執行時間。
咱們將上面的代碼加入防抖優化一下：ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加入防抖</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = function () {
            //模擬ajax請求
            function ajax(content) {
                console.log('ajax request ' + content)
            }
            function debounce(fun, delay) {
                return function (args) {
                    //獲取函數的做用域和變量
                    let that = this
                    let _args = args
                    //每次事件被觸發，都會清除當前的timeer，而後重寫設置超時調用
                    clearTimeout(fun.id)
                    fun.id = setTimeout(function () {
                        fun.call(that, _args)
                    }, delay)
                }
            }
            let inputDebounce = document.getElementById('debounce')
            let debounceAjax = debounce(ajax, 500)
            inputDebounce.addEventListener('keyup', function (e) {
                debounceAjax(e.target.value)
            })
        }
    </script>
</head>
<body>
    <div>
        2.加入防抖後的輸入：
        <input type="text" name="debounce" id="debounce">
    </div>
</body>
</html>

上面代碼加入防抖後，當持續在輸入框裏輸入時，並不會發送請求，只有當在指定時間間隔內沒有再輸入時，纔會發送請求。若是先中止輸入，可是在指定間隔內又輸入，會從新觸發計時。segmentfault

節流(throttle)

規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，若是在同一個單位時間內某事件被觸發屢次，只有一次能生效。
咱們一樣在上面的需求上進行修改，加入節流函數。瀏覽器

//模擬ajax請求
function ajax(content) {
    console.log('ajax request ' + content)
}

function throttle(fun, delay) {
    let last, deferTimer
    return function (args) {
        let that = this;
        let _args = arguments;

        let now = +new Date();
        if (last && now < last + delay) {
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function () {
                last = now;
                fun.apply(that, _args);
            }, delay)
        } else {
            last = now;
            fun.apply(that, _args);
        }
    }
}
let throttleAjax = throttle(ajax, 1000)
let inputThrottle = document.getElementById('throttle')
inputThrottle.addEventListener('keyup', function (e) {
    throttleAjax(e.target.value)
})