防抖和节流

定义： 

防抖 (debounce) 和节流 (throttle)

• 防抖：n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。
• 节流：n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。

为什么会出现 防抖 和 节流

        防抖和节流是针对响应跟不上出发频率 这类问题的两种解决方案。

        在给DOM 绑定事件时，有些事件我们是无法控制触发频率的。如鼠标移动事件onmousemove，滚动滚动条事件 onscroll，窗口大小改变事件 onresize，瞬间的操作都会导致这些事件会被高频触发。如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。在实时检查输入时，如果我们绑定 onkeyup 事件发请求去服务器端检查，用户输入过程中，事件的触发频率也会很高，会导致大量的请求发出，响应速度会大大跟不上触发

总结：以下场景往往由于事件频繁被触发，而重复执行DOM操作，资源加载等重行为、会导致UI停顿甚至浏览器崩溃。

1. window对象的resize、scroll和拖拽时的mousemove事件
2. 射击游戏中的mousedown，keydown事件
3. 类似百度搜索提示keyup事件

防抖 (debounce)

总结：什么是debounce，高频率触发的事件，我们最终只让他执行一次

        debounce，去抖动。策略是当事件被触发时，设定一个周期延迟动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。这是debounce的基本思想，在后期又扩展了前缘debounce，即执行动作在前，然后设定周期，周期内有事件被触发，不执行动作，且周期重新设定

        **debounce  的特点是当事件快速联系不断触发时，动作只会执行一次**。延迟debounce，是在周期结束时执行。但当触发有间断，且简短大雨我们设定的时间间隔时，动作就会有多次执行

节流 (throttle)

         throttle：是指在一定时间间隔内只执行一次操作。当事件触发后，会立即执行一次操作，然后在指定的时间间隔内忽略后续的事件触发。

        throttle 常用于处理高频率触发的事件，例如滚动事件、鼠标移动事件等。它可以限制函数的执行频率，减少不必要的计算和操作。 降低事件处理程序执行的频率。  比如，onmousemove事件如果一秒钟执行200次，通过节流可以只执行20次

面试题： 什么是防抖和节流

• 防抖是等待一段时间后执行操作，如果在等待时间内又触发了事件，则重新计时；节流是在一定时间间隔内只执行一次操作。
• 防抖适用于处理频繁触发的事件，节流适用于处理高频率触发的事件。
• 防抖可以避免函数被频繁调用，提升性能和用户体验；节流可以限制函数的执行频率，减少不必要的计算和操作。