[手寫系列] Spirit帶你實現防抖函式和節流函式

CodeSpirit發表於2021-12-15
函式

前言

防抖函式和節流函式,無論是寫業務的時候還是面試的時候,想必大家已經聽過很多次了吧.但是大家在用到的時候,有了解過他們之間的區別嘛,他們是如何實現的呢?還是說只是簡單的呼叫下像lodash和underscore這種第三方庫提供給我們的節流和防抖函式呢?

本文接下來將會帶你們瞭解下這兩者的區別,以及我們該如何手寫實現這兩個函式.

防抖函式和節流函式的區別

防抖函式:是指觸發了一個事件,在規定的時間內,如果沒有第二次事件被觸發,那麼他就會執行.換句話講,就是說,如果不斷有事件被觸發,那麼規定的執行時間將會被不斷推遲

防抖函式示例圖

節流函式:指的是在規定時間內,你無論觸發多少次事件,你也只會執行一次.我舉個生活中的例子,就很好理解了.王者榮耀這個遊戲可能很多人多玩過,每個英雄都有自己的技能,在我們點選一次後,該技能會進入冷卻時間,即使我們點的再快,該技能在冷卻時間好之前也只能觸發一次(我們第一次點選的時候)

節流函式示例

防抖函式的實現

我將實現防抖函式的四個功能,希望大家能一步步的跟著來,循序漸進,相信大家一定會有收穫的

基本實現

我們可以想下,要想一個事件在規定時間過後執行,在JS中該怎麼實現?

????

好 時間到

定時器,小夥伴們肯定都知道的吧?

觸發事件,在一定時間後執行,這個可以使用定時器解決了.

那麼 接下來還有一個問題 在觸發事件後,再觸發事件,該如何讓他推遲執行呢?

如果規定時間內,再觸發的話,我們就把之前建立的定時器刪除不就好了,對不對?

這樣是不是就解決了我們的問題,好,我們現在來寫下程式碼,怕大家有點不明白

function debounce(fn, delay) {
    //定義一個定時器
    let timer = null;
    // 每次觸發的時候 清空上一次的定時器
    const _debounce = function () {
        if (timer) clearTimeout(timer);
        //根據傳進來的延時 執行
        timer = setTimeout(() => {
            fn();
        }, delay)
    }
    return _debounce;
}

這段程式碼還是比較容易的吧,相信小夥伴們肯定都懂了?

但是這段程式碼還是有點問題,我們來呼叫下第三方庫的underscore的防抖函式

<body>
    <button>取消</button>
    <input type="text">
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
    <script>
        const btn = document.querySelector("button");
        const input = document.querySelector("input");
        let count = 0;
        function test(event) {
            // 注意這裡的this 和 event
            console.log(`傳送${++count}網路請求`, this, event);
            return "我是返回結果";
        }
        input.oninput = _.debounce(test, 2000);
    </script>
</body>

我們開啟瀏覽器除錯,看下輸出結果

image-20211213091046442

可以看到this和Event輸出是沒有任何問題的.

再來看看我們的輸出

image-20211213091306911

你會發現 this是window了 而Event是undefined.

這是為什麼呢?

這是因為 我們寫的程式碼沒有對this進行一個繫結,同時也沒有將DOM元素的event接收

fn()直接執行 這時候的this是直接指向window的

function debounce(fn, delay) {
    let timer = null;
    //使用剩餘引數接收所有的引數 DOM在呼叫這個函式的時候,我們就能接收到event了
    const _debounce = function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            //注意 我們使用apply進行一個換綁,綁到執行這個的DOM元素上
            fn.apply(this,args);
        }, delay)
    }
    return _debounce;
}

至此,我們這個防抖函式的基本實現就沒有任何問題了

看到這裡的小夥伴們,你們真不錯???

這個基本實現 拿來應付面試已經夠了,接下來我們還有一些額外的功能要實現,想看的可以繼續往下看了,現在不想看的也可以收藏下,以後來看.

立即執行

在某些應用場景下,比如搜尋的時候,你輸入第一個字元的時候,他就會聯想出一系列的字元,他不會等待一段時間後再去執行,而是會立馬執行,我們接下來實現下這個功能

首先,立即執行這個功能,我們可以將它交給使用者來決定是不是要使用這個功能

debounce(fn,delay,immediate=false)

我們以引數的形式傳遞,預設是關閉的

好,我們現在來看下程式碼實現

function debounce(fn, delay, immediate = false) {
    let timer = null;
    //程式碼規範 我們最好不要修改 使用者傳遞進來的引數
    //所以我們在下面宣告瞭一個變數 用於控制
    let isInvoke = false;
    const _debounce = function (...args) {
        if (timer) clearTimeout(timer);
        //如果immdiate為true
        //isInvoke取反為true
        if (immediate && !isInvoke) {
            //會立馬執行一次
            fn.apply(this, args);
            //同時將isInvoke設定為true,防止下次觸發的時候 又再次觸發立即執行
            isInvoke = true;
        } else {
            //第一次觸發結束立即執行後
            //isInvoke會限定在定時器中 輸入結束後 才會重新重新整理isInvoke
            timer = setTimeout(() => {
                //剩下的操作在規定時間內 會等待定時器結束
                fn.apply(this, args);
                //同時重新重新整理inInvoke
                isInvoke = false;
            }, delay)
        }
    }
    return _debounce;
}

好,這一塊還是比較簡單的吧,相比大家應該看懂了,如果有什麼不懂的地方,歡迎評論區留言,我看見了就會回答的✨

那麼我們開始下一個篇章的 如果使用者輸入之後 不想讓他請求呢 這時候我們就需要一個取消功能了,對,我們接下來就是要實現取消功能了

取消功能

我們該如何在剩餘的時間內取消請求呢?

對 沒錯! 清空定時器

我們只需要在我們返回的函式上加個靜態方法 給使用者提供個取消功能即可

我們來看下程式碼實現

 // 給返回的這個函式新增一個靜態方法 用於取消請求
    _debounce.cancel = function () {
        if (timer) clearTimeout(timer);
    }

是不是很簡單呢? 就這麼簡單一行程式碼 取消功能就完成了

好,我們還有最後一個功能需要實現的 那就是如果開發者想要拿到請求後的返回結果的話,我們現階段的防抖函式能不能做到呢? 貌似不行吧?

所以接下來,我們來實現最後一個功能 取到返回結果

返回結果

我們思考一個問題 返回結果在哪呢?

使用者傳遞一個函式給我們 返回一個新的函式

那麼返回結果一定是在使用者傳遞給我們的那個函式上的

所以關鍵就是 將使用者的那個函式的返回結果傳遞出來

現在 我們這裡有兩個方案

  1. 回撥函式
  2. Promise

我們先來看下回撥函式的版本

// 回撥函式版本
function debounce(fn, delay, immediate = false, resultCallBack) {
    let timer = null;
    let isInvoke = false;
    let result = null;
    const _debounce = function (...args) {
        if (timer) clearTimeout(timer);
        if (immediate && !isInvoke) {
            //接收結果
            result = fn.apply(this, args);
            resultCallBack(result);
            isInvoke = true;
        } else {
            timer = setTimeout(() => {
                //接收結果
                result = fn.apply(this, args);
                resultCallBack(result);
                isInvoke = false;
            }, delay)
        }
    }
    _debounce.cancel = function () {
        if (timer) clearTimeout(timer);
        timer = null;
        isInvoke = false;
    }
    return _debounce;
}

實際應用

        const _debounce = () => {
             debounce(test, 1000)().then(res => {
                 console.log(res);
             })
         }
         input.oninput = _debounce;

回撥函式的是不是比較簡單? 我們來看下Promise版本的 在實際應用的時候要注意一些坑

function debounce(fn, delay, immediate = false) {
    let timer = null;
    let isInvoke = false;
    let result = null;
    const _debounce = function (...args) {
        //在返回的函式中 直接整體返回一個Promsie物件
        //將結果傳入 resolve中
        return new Promise((resolve, rejected) => {
            if (timer) clearTimeout(timer);
            if (immediate && !isInvoke) {
                result = fn.apply(this, args);
                resolve(result)
                isInvoke = true;
            } else {
                timer = setTimeout(() => {
                    result = fn.apply(this, args);
                    resolve(result);
                    isInvoke = false;
                }, delay)
            }
        })
    }
    _debounce.cancel = function () {
        if (timer) clearTimeout(timer);
        timer = null;
        isInvoke = false;
    }
    return _debounce;
}

實際呼叫

  const _debounce = function(...args){
            debounce(test, 1000).apply(this,args).then(res => {
                console.log(res);
            })
        };
  input.oninput = _debounce;

注意到了吧 我們對原來的函式又封裝了一層 因為只有這樣才能拿到promise的結果

同時this和event不會出問題

看到這裡的小夥伴們真棒,相信你們防抖函式一定沒問題了,待會我們就開始講解 節流函式該如何實現

節流函式的實現

節流函式我們也是從幾個方面逐步實現,帶著大家一步步的解開節流函式的面紗.

基本實現

大家可以想下,節流函式該如何實現.

一段時間內,只會觸發一次操作,後續的操作就不會被觸發.

我們可以拿到當前的時間戳 來進行計算

我們直接通過程式碼來講吧 比較方便講

function throttle(fn, interval) {
    let lastTime = 0;
    const _throttle = function () {
        //首先拿到當前的時間
        const nowTime = new Date().getTime();
        //傳遞進來的時間間隔 用當前的時間減去上一次觸發的時間
        //得到最新的剩餘時間
        const reamainTime = interval - (nowTime - lastTime);
        if (reamainTime <= 0) {
            fn();
            //如果剩餘時間小於0 說明已經達到一個間隔
            //並且將現在的時間賦值給lastTime
            //在時間間隔內 這樣無論執行多少次 都只會執行第一次的操作
            //因為第一次的lastTime是0 而nowTime是比較大的
            //減去之後一定是個負數 所以會執行第一次 
            //而不會執行後續的操作
            lastTime = nowTime;
        }
    }
    return _throttle;
}

大家看下我上面這段程式碼 還是比較好理解的吧,面試的話能夠寫出這一部分已經很可以了,但是要想更加出彩,能和麵試官多嘮會的吧,我們接著看下面的實現

leading實現

我們在基本實現中,其實已經將這個功能已經實現了,但是並不是可以控制的,我們這個實現是將是否首次觸發交給使用者來決定,大家可以想下該如何實現❓

❗基本實現中,我們是如何實現第一次觸發的?

是不是通過拿到的時間戳非常大,而lastTime為0所導致的呢?

所以我們是不是可以讓lastTime也能拿到當前的時間戳呢,這樣子, nowTime和lastTime相減的時候,是不是就不會變成負數呢?

✨程式碼實現

// 考慮到 我們後面會有很多功能要實現
//所以我們使用選項來進行配置.避免造成更多引數
function throttle(fn, interval, option = { leading: true }) {
    let lastTime = 0;
    const { leading } = option;
    const _throttle = function () {
        const nowTime = new Date().getTime();
        //在 leading和lastTime為false的情況下
        //就將nowTime賦值給lastTime,這樣就不會在第一次就執行操作了
        if (!leading && !lastTime) lastTime = nowTime;
        const reamainTime = interval - (nowTime - lastTime);
        if (reamainTime <= 0) {
            fn();
            lastTime = nowTime;
        }
    }
    return _throttle;
}

?大家是不是理解了呢? 我個人認為還是比較好懂的吧,不懂的可以在評論區留言,我看到就會給大家解答的

?接下來,我們看下和這個情況相反的一種狀況,如果我們想要在最後一次操作的時候進行一次觸發操作的話,該如何去做呢?

trailing實現

這一塊是比較難的部分了,會有點難,大家不懂的話,要多看幾遍,實在有不明白的,歡迎評論區留言

❓首先最後一次觸發操作時,我們該怎麼樣讓它執行?

❗我提供一個思路,當我們最後一次觸發操作的時候,拿到距離間隔還有多少時間結束,加上一個定時器,讓他根據這個剩餘時間去按時執行

✨程式碼實現

function throttle(fn, interval, option = { leading: true, tralling: false }) {
    let lastTime = 0;
    let timer = null;
    const { leading, tralling } = option;
    const _throttle = function (...args) {
        const nowTime = new Date().getTime();
        if (!leading && !lastTime) lastTime = nowTime;
        const reamainTime = interval - (nowTime - lastTime);
        if (reamainTime <= 0) {
            fn.apply(this, args);
            lastTime = nowTime;
            if (timer) {
                clearTimeout(timer)
                timer = null;
            }
            // 如果執行了這一部分 那麼後面的tralling就沒有必要去執行
            // 說明剛好執行到了這一步 後面的最後按下 就不需要
            return;
        }
        if (tralling && !timer) {
            timer = setTimeout(() => {
                timer = null;
                /**     `
                 *  首先 按下第一次的時候 這個定時器已經被加上了
                 *  每次進來的時候 等待一定時間 定時器會被置空 方便下次使用
                 *  根據剩餘時間 來判斷執行
                 *  如果leading為false lastTime會被設定為0 會在規定的剩餘時間到達後 去執行這個函式 而remianTime那個部分就不會被執行 因為remainTime會一直保持在一個正數狀態
                 *  如果leading為true lastTime會被設定為當前的時間 這樣在下一次的操作下,remainTime才會發生變化
                 * 
                 */
                lastTime = !leading ? 0 : new Date().getTime();
                fn.apply(this, args);
            }, reamainTime)
        }
    }
    return _throttle;
}

是不是比較難懂呢? 我在來解釋一下啊

❗❗

  • 首先如果remainTime已經小於0了,那麼fn就會去執行,我們也就不需要去執行後續的操作了 會直接返回
  • 那麼如果remainTime沒有小於0,我們會設定定時器,在定時器內部,我們需要先把timer清空,防止下一次觸發的時候又觸發了.
  • 其次,我們要將lastTime進行一個處理
    • 如果我們之前設定的leading是false的話,那麼我們需要將lastTime置為0,這樣在下一次的觸發操作的時候,才能觸發leading為false的情況下的邏輯語句
    • leading為true的情況下,需要將lastTime設定為當前的時間戳,這樣在下一次的操作的時候,才會remainTime才會發生變化,邏輯才能執行下去.

?大家有沒有聽明白呢? 可能是會有點難懂,但是好好多看幾遍,還是能夠理解的我相信!!!

接下來的操作就比較簡單了,大家可以安心食用,和防抖函式一樣,是取消功能和返回結果

取消功能和返回結果

因為這個和防抖函式是一樣的,所以我這裡直接就放程式碼了

function throttle(fn, interval, option = { leading: true, tralling: false, resultCallback }) {
    let lastTime = 0;
    let timer = null;
    let result = null;
    const { leading, tralling, resultCallback } = option;

    // 兩種結果回撥
    //和防抖函式是一樣的
    //1. 通過傳遞一個回撥函式
    //2. 通過promise 進行結果回撥
    const _throttle = function (...args) {
        return new Promise((resolve, reject) => {
            const nowTime = new Date().getTime();
            if (!leading && !lastTime) lastTime = nowTime;
            const reamainTime = interval - (nowTime - lastTime);
            if (reamainTime <= 0) {
                result = fn.apply(this, args);
                resultCallback(result);
                resolve(result);
                lastTime = nowTime;
                if (timer) {
                    clearTimeout(timer)
                    timer = null;
                }
                return;
            }
            if (tralling && !timer) {
                timer = setTimeout(() => {
                    timer = null;
                    lastTime = !leading ? 0 : new Date().getTime();
                    result = fn.apply(this, args);
                    resultCallback(result);
                    resolve(result);
                }, reamainTime)
            }
        })
    }
    //取消功能
    _throttle.cancel = function () {
        if (timer) clearTimeout(timer);
        timer = null;
        lastTime = 0;
    }
    return _throttle;
}

大家可以看下是不是一摸一樣的呢? 非常輕鬆吧

能看到這裡的小夥伴們,一定收穫很大,你們真棒??

最後,讓我介紹一下我自己,我是CodeSpirit,一名正在學習前端的coder,關注我,帶你學習更多前端知識❗❗❗

相關文章