防抖与节流函数<转>
本文转自: https://www.cnblogs.com/zhuanzhuanfe/p/10633019.html 我们经常会处理各种事件,比如常见的click、scroll、 resize等等。仔细一想,会发现像scroll、onchange这类事件会频繁触发,如果我们在回调中计算元素位置、做一些跟DOM相关的操作,引起浏览器回流和重绘,频繁触发回调,很可能会造成浏览器掉帧,甚至会使浏览器崩溃,影响用户体验。 还有以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。 1. window对象的resize、scroll事件 2. 拖拽时的mousemove事件 3. 射击游戏中的mousedown、keydown事件 4. 文字输入、自动完成的keyup事件 实际上对于window的resize事件,实际需求大多为停止改变大小n毫秒后执行后续处理;而其他事件大多的需求是以一定的频率执行后续处理。 针对这两种需求,常用的解决方案:防抖和节流。 防抖(debounce) 所谓防抖,就是指触发事件后,就是把触发非常频繁的事件合并成一次去执行。即在指定时间内只执行一次回调函数,如果在指定的时间内又触发了该事件,则回调函数的执行时间会基于此刻重新开始计算。 以我们生活中乘车刷卡的情景举例,只要乘客不断地在刷卡,司机师傅就不能开车