函数防抖节流

相同点：

• 都可以通过使用 setTimeout 实现
• 目的都是，降低回调函数的执行频率，节省计算资源

不同点：

• 函数防抖，是在一段连续操作结束之后，处理回调，利用 clearTimout 和 setTimeout 实现。
• 函数节流，是在一段连续操作中，每一段时间只执行一次，在频率较高的事件中使用来提高性能。
• 函数防抖关注一段时间内连续触发，只在最后一次执行；而函数节流侧重于在一段时间内只执行一次。

使用场景

防抖

连续的事件，只需触发一次的回调场景有：

1.搜索框搜索输入。只需要用户最后一次输入完再发送请求
2.手机号、邮箱格式的输入验证检测
3.窗口大小的 resize 。只需窗口调整完成后，计算窗口的大小，防止重复渲染

function debounce(fn, delay = 500) {
    // timer 是在闭包中的
    let timer = null;

    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            // 把this 给他
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

节流

1.滚动加载
2.谷歌搜索框，联想功能
3.高频点击提交，表单重复提交

function throttle(fn, delay) {
    let timer = null

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