防抖节流原理及应用
date
Jun 9, 2023
slug
防抖节流原理及应用
status
Published
tags
IT
summary
防抖节流原理及应用
type
Post
防抖
- 原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
- 适用场景：
按钮提交场景：防止多次提交按钮，只执行最后提交的—次
搜索框联想场景：防止联想发送请求，只发送最后一次输入
- 简易版实现
- 立即执行版实现
有时希望立刻执行函数，然后等到停止触发n秒后，才可以重新触发执行。
- 返回值版实现
func函数可能会有返回值，所以需要返回函数结果，但是当immediate为false的时候，因为使 setTimeout , 我们将func.apply(context, args)的返回值赋给变量，最后再return的时候，值将会一直是 undefined, 所以只在immediate为true的时候返回函数的执行结果。
节流
- 原理规定在—个单位时间内，只能触发—次函数。如果这个单位时间内触发多次函数，只有—次生效。
- 适用场景
拖拽场景：固定时间内只执行—次，防止超高频次触发位置变动
缩放场景：监控浏览器resize
- 使用时间戳实现
使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳（最—开始值设为0) 如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。
- 使用定时器实现
当触发事件的时候，我们设置—个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时 行，然后执行函数，清空定时器，这样就可以设置下个定时器。