防抖和节流

是什么：

防抖就是在事件触发后的一段时间内执行延时函数，这段时间内如果再次触发会取消前一次的延时函数，重新计时。
节流就是在频繁触发某个事件的情况下，每隔一段时间请求一次

相同:在不影响客户体验的前提下,将频繁的回调函数,进行次数缩减.避免大量计算导致的页面卡顿.

不同:防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次. 一般不会重置定时器. 即不会if (timer) clearTimeout(timer);(时间戳+定时器版除外)

为什么：

性能优化

怎么做：

防抖(debounce)

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

        return function () {
            if (timer) {
                clearTimeout(timer) // clearTimeout是JavaScript中用于取消setTimeout设置的延时定时器的核心函数‌，通过传入定时器ID终止尚未执行的代码块。‌‌
            }
            timer = setTimeout(() => {
                fn.apply(this, arguments)
                timer = null
            }, delay)
        }
    }

应用场景：

搜索（例如百度搜索关键字）input不需要一改变就向服务器发送请求

节流(throttle)

// 节流
function throttle(fn, delay = 100) {
    let timer = null

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

应用场景：

鼠标拖拽或移动位置记录
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件例如获取滚动位置不需要触发那么快