防抖
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
节流
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
总结
- 函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的原理却不一样。
- 函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。
使用场景
节流
- 用户在搜索的时候,在不停的输入,如果每敲一个字我们就要调一次接口去查询,接口调用太频繁,会占内存给卡住。
- 手机号、邮箱验证输入检测
防抖
- 窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
- 页面滚动处理事件
- 鼠标不断点击触发,mousedown(单位时间内只触发一次)
- 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断