一、防抖和节流是什么
- 本质上是优化高频率执行代码的一种手段。
- 防抖在连续的事件,只需触发一次回调的场景有:①搜索框搜索输入。只需用户最后一次输入完,再发送请求;②手机号、邮箱验证输入检测;③窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
- 节流在间隔一段时间执行一次回调的场景有:①滚动加载,加载更多或滚到底部监听;②搜索框,搜索联想功能;
- 相同点:都可以通过使用 setTimeout 实现;目的都是,降低回调执行频率。节省计算资源;
- 不同点:函数防抖,在一段连续操作结束后,处理回调,利用clearTimeout和 setTimeout实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能;数防抖关注一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次;
二、代码实现
-
节流
-
防抖