防抖

監聽一個輸入框，文字變化後觸發change事件
直接用keyup事件，則會頻繁觸發change事件
防抖：使用者輸入結束或暫停時，才會觸發change事件
防止表單多次提交

/**
 * 防抖
 */
function debounce(fn, delay) {
    let timer = null
    return function () {
        if (timer) {
            clearTimeout(tiemr)
        }
        timer = setTimeout(()=>{
            fn.apply(this, arguments)
            timer = null
        }, delay);
    }
}
 

節流

拖拽一個元素時，要隨時拿到該元素被拖拽的位置
直接用drag事件，則會頻繁觸發，很容易導致卡頓
節流：無論拖拽速度多塊，都會每隔100ms觸發一次

/**
 * 節流
 */
function throttle(fn, delay = 100) {
    let timer = null
    return function(){
        if (tiemr) {
            return
        }
        thimer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay);
    }
}