什么是防抖和節流？應用場景是什么？如何實現？

一、防抖

概念：觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間

場景：等待用戶輸入完畢再進行搜索

思路：每次觸發事件時都取消之前的延時調用方法

const debounce = fn => {
    let timeout = null;          // 創建一個標記用來存放定時器的返回值
    return function (){
        clearTimeout(timeout);   // 當用戶輸入時把上一個setTimeout清除掉
        timeout = setTimeout(() => {
            fn.apply(this,arguments);
        },300)
    }
}

const sayHi = () => {
    console.log("防抖成功");
}

let inp = document.querySelector("#inp");
inp.addEventListener("input",debounce(sayHi));     // 防抖

一、節流

概念：高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函數的執行頻率

場景：監聽瀏覽器窗口變化時

思路：每次觸發事件時都判斷當前是否有等待執行的延時函數

const throttle = fn => {
    let canRun = true;          // 通過閉包保存一個標記
    return function (){
        if(!canRun) return;     // 在函數開頭判斷標記是否為true，不為true則return
        canRun = false;         // 立即設置為false
        setTimeout(() => {
            fn.apply(this,arguments);
            // 最后在setTimeout執行完畢后再把標記設置為true(關鍵)表示可以執行下一次循環了。當定時器沒有執行的時候標記永遠是false，在開頭被return掉
            canRun = true;
        },300)
    }
}

const sayHi = e => {
    console.log(e.target.innerWidth,e.target.innerHeight);
}

window.addEventListener("resize",throttle(sayHi));