面对滴滴、YY等厂子提问的防抖与节流，我是如何应对的

前记

哈喽！这是鳄鱼手撕代码学习记录第二弹：防抖与节流。这次为什么要写这个呢？当然是因为本鳄鱼在求实习之旅中真的碰到了好多次，就近期的滴滴、百词斩、YY的面试中，基本每场面试都会被提问到这个点，所以想要好好整理一下记录下来。

防抖

防抖，官方的解释： 短时间内大量触发同一事件，只会在最后一次事件完成后延迟执行一次函数。例如，在输入用户名的过程中，需要反复验证用户名。此时，应该在等到用户不再操作停止输入的时候再进行验证，否则将影响用户体验。

防抖实现的原理就是在触发事件后设置计时器。在计数器延迟过程中，如果事件再次触发，则重置计时器。在没有触发事件之前，计时器将再次触发并执行相应的功能。

1. 声明定时器
2. 返回函数
3. 一定时间间隔，执行回调函数
4. 回调函数
   • 已执行：清空定时器
   • 未执行：重置定时器

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

节流

节流，是指每隔一段时间就执行一次函数。是不是很容易想到节约用水，而就像未拧紧的水龙头一样，水龙头每隔一段时间就会滴水。即使在这段时间管道里有更多的水，水龙头也不会掉出更多的水。

节流的原理是在触发事件后设置计时器。在计时器延迟过程中，即使事件再次触发，计时器的延迟时间也不会改变。在计时器执行功能之前，计时器不会复位。

1. 声明定时器
2. 返回函数
3. 一定时间间隔，执行回调函数
4. 回调函数
   • 已执行：清空定时器
   • 未执行：返回

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

区别

其实大家看下来想必两者的区别都一目了然。其实归根结底的区别就是面对已经存在的定时器事件两者的处理方式不同，防抖是重置，而节流是直接返回。

晚安，待续