节流(throttle)VS防抖(debounce)

节流：函数在设置的时间内只触发一次

防抖：函数在设置的时间内只触发最后一次

节流场景（频繁触发事件在设置的时间只执行一次）：

• 表单重复提交
• 滚动事件
• 拖拽事件
• 输入框搜索

防抖场景（频繁触发事件在设置的时间只执行最后一次）：

• 输入框搜索
• 窗口改变

其中输入框搜索中：

假设想要输入完关键词之后再提示，用防抖。（注重结果）

假设想要输入关键词过程中就及时提示，用节流。（注重过程）

1.节流函数如下:

function throttle (fn, delay=400) {
    let timer = null
    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

2.防抖函数如下:

function debounce (fn, delay=400) {
    let timer = null
    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer= null
        }, delay)
    }
}