防抖和节流? 1.具体是什么? 防抖:用户连续多次触发事件,只执行最后一次; 节流:用户n秒内多次触发事件,只执行一次。
2.为什么会有? 都是为了限制函数的执行次数,避免短时间内不必要的多次函数执行。防止高频调用函数带来的性能损耗和卡顿。
3.原理: 防抖:用户每次触发事件都会延迟执行,在设置延时定时器之前都会把上一次延时定时器清除,最终只有用户连续触发这个事件的间隔事件超出我们设置的参数ms毫秒之后,该事件才会触发一次。
节流:用户每一次触发都会设置一个延时定时器,但如果已经设置了延时定时器,会等上一次延时定时器执行之后才会开启下一个定时器。这样用户一直触发,事件会每间隔一段时间执行一次。
4.使用场景: 防抖: ① 搜索框,用户在不断输入值时,搜索框下面自动补全搜索框关键字 ② 输入手机号,邮箱验证时输入字符的检测(用防抖来实现用户暂停连续输入时才处理用户输入的数据。)
节流: ① 触底加载更多/滚动加载更多事件(用节流来规避前端事件的不断触发引起的性能问题) ② 防止重复点击事件(用节流来避免表单重复提交/按钮重复点击)