在開始之前我們先簡單瞭解下什麼是防抖和節流。

防抖，即短時間內大量觸發同一事件，只會執行一次函式，實現原理為設定一個定時器，約定在xx毫秒後再觸發事件處理，每次觸發事件都會重新設定計時器，直到xx毫秒內無第二次操作，防抖常用於搜尋框/滾動條的監聽事件處理，如果不做防抖，每輸入一個字/滾動螢幕，都會觸發事件處理，造成效能浪費。

function debounce(func, wait) {
    let timeout = null
    return function() {
        let context = this
        let args = arguments
        
 
if (timeout) clearTimeout(timeout)
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait)
    }
}

防抖是延遲執行，而節流是間隔執行，函式節流即每隔一段時間就執行一次，實現原理為設定一個定時器，約定xx毫秒後執行事件，如果時間到了，那麼執行函式並重置定時器，和防抖的區別在於，防抖每次觸發事件都重置定時器，而節流在定時器到時間後再清空定時器

function throttle(func, wait) {
    let timeout 
 
= null
    return function() {
        let context = this
        let args = arguments
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null
                func.apply(context, args)
            }, wait)
        }

    }
}