JS手寫面試題 --- 防抖、節流

題目描述:手寫防抖節流

實現程式碼如下:
防抖： 防抖是指在一定的時間內再次觸發此事件,會清空上次的事件重新開始,如果制定的時間內沒有再次觸發,那麼這個事件才會執行

例如: input輸入資訊,不可能每次按下都發起一個ajax請求,可以等一段時間內不輸入了之後在發起請求

// 防抖
    function debounce(fn, delay = 300) {
        // 預設 300毫秒
        let timer;
        return function () {
            const args = arguments;
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn.apply(this, args); // 改變 this 指向為呼叫debounce所指的物件
            }, delay);
        };
    }

    window.addEventListener(
        "scroll", debounce(() => {
            console.log(111);
        }, 1000)
    );
 

節流： 節流是指在一定的時間同一事件只會觸發一次,只有超過了這個時間才會再次出發

例如: 驗證碼60秒內不可以再次觸發(實際開發肯定是使用禁止,但是原理和驗證碼一樣)

// 節流
// 設定一個標誌
    function throttled(fn, delay) {
        let flag = true;
        return () => {
            if (!flag) return;
            flag = false;
            timer = setTimeout(() => {
                fn();
                flag = true;
            }, delay);
        };
    }

    window.addEventListener(
        "scroll", throttled(() => {
            console.log(111);
        }, 1000)
    );