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