JS防抖和节流

函数防抖和函数节流都是解决短时间频繁触发某函数而导致的性能问题

• 函数防抖（debounce）：在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时
• 函数节流（throttle）：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

使用场景

防抖

• 短信验证码
• 提交表单
• resize 事件
• input 事件（当然也可以用节流，实现实时关键字查找）

节流

• scroll 事件，单位时间后计算一次滚动位置
• input 事件
• 鼠标连续点击 事件
• 播放事件，计算进度条

函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

– 原理：

防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。