防抖和节流

防抖(debounce)和节流(throttle)

定义

 节流：n秒后在执行该事件，若在n秒内被重复触发，则重新计时

  防抖： n秒内只运行一次 ，若在n秒内重复触发，只有一次生效

防抖

为什么会出现 debounce 和throttle

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

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

debounce 防抖

debounce ，去抖动策略是当事件触发时，设定一个周期延迟动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作，这是debounce的基本思想，在后期又扩展了前缘debounce 即执行动作在前，然后设定周期，周期内有事件被触发，不执行动作，且重新设定debounce的特点是当事件快速联系不端触发时，动作只会执行一次延迟debounce，是在周期结束时执行。但当触发有间断，且简短大雨我们设定的时间间隔时，动作就会有多次执行

高频率触发的事件，我们最终只让他执行一次

面试题： 什么是防抖：在频繁触发某一个事件时，一段时间内不再触发该事件后才会去调用对应的回调函数，在设定间隔时间内如果下一次事件被触发， 那么就重新开始定时器，直到事件触发结束。 什么时候使用：防抖用于高频触发的事件 特点：高频触发事件处理程序，只执行他的最后

节流

以下场景往往由于事件频繁被触发，而重复执行DOM操作、资源加载等重行为、会导致UI停顿甚至浏览器崩溃。 1、window对象的resize、scroll和拖拽时的mousemove事件 2、射击游戏中的mousedown、keydown事件 3、类似百度搜索提示keyup事件 防抖： 在事件多次触发时，通过防抖，只执行最后一次事件处理程序 节流：  降低事件处理程序执行的频率。  比如，onmousemove事件如果一秒钟执行200次，通过节流可以只执行20次