总字数 773
预计阅读时间 3 分钟
函数防抖
与函数节流
都是应用在该函数绑定的事件(比如keyup scroll等)可能在短时间内被频繁调用的情况
应用后可以有效提升性能, 从而优化页面流畅度
防抖(debounce)
在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时
比如事件在9:00被触发, 设定在10秒后执行回调函数
之后在9:03的时候该事件再次被触发, 那么回调函数将会在9:13执行(原本会在9:10执行的回调函数不会执行)
如果在此期间事件再次被触发, 则回调函数执行事件继续向后推移
代码模拟实现
1 | (function(){ |
实际的效果就是在输入框当中输入内容, 当输入动作停止1秒后才会执行callback
而不是输入一个字符就执行一次
原理
防抖是创建一个定时器,规定在delay时间后触发函数
但是在delay时间内再次触发的话,都会清除当前的定时器重新计时。这样一来,只有最后一次操作事件才被真正触发。
节流(throttle)
规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。
比如事件在9:00被触发, 设定时间单位是10秒
之后在9:03的时候该事件再次被触发, 那么本次触发就是无效的
在9:00~9:10期间事件再次被触发, 均是无效的
代码模拟实现
1 | (function(){ |
应用场景举例
节流: 提交按钮的防重点
防抖: input框对输入内容的自动联想