vue 封装防抖、节流
函数防抖是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次。函数节流对于短时间内大量触发同一事件(滚动事件、输入框实时搜索),那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效函数节流(throttle)与函数防抖(
·
什么是防抖节流
函数防抖 是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次。
函数节流 对于短时间内大量触发同一事件(滚动事件、输入框实时搜索),那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效
函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。
区别:
防抖是将多次执行变成最后一次执行;而节流是将多次执行变为每隔一段时间执行一次。
那么它们各自的使用场景有哪些呢?
防抖
- 短信验证码
- 滚动事件
- 表单重复提交
- 页面 resize 事件
- input 事件(当然也可以用节流,实现输入框实时搜索)
节流
- scroll 事件,单位时间后计算一次滚动位置
- input 事件
- 播放事件,计算进度条
函数封装
1、封装防抖节流方法
AntiShake.js
export default {
// 防抖
debounce: function (fn, delay) {
// 时间期限
var delays = delay || 200;
var timer;
// 闭包
return function () {
// 考虑作用域,上下文环境,apply需要用到this对象
var th = this;
// 接收的参数用 ES6 中的 rest 参数统一存储到变量 args 中。arguments就是传入的参数数组,而且个数可以不确定的传回给fn(不确定函数到底有多少个参数,用arguments来接收)
var args = arguments;
// 判断还在定时,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
// 执行方法
fn.apply(th, args);
}, delays);
};
},
// 节流 定时器 + 时间戳
throttle: function(func, delay) {
var timer = null
var startTime = Date.now()
return function() {
// 结束时间
var curTime = Date.now()
// 间隔时间 = 延迟的时间 - (结束时间戳 - 开始时间戳)
var interval = delay - (curTime - startTime)
var th = this
var args = arguments
clearTimeout(timer)
if(interval <= 0) {
// 证明可以触发了
func.apply(th, args)
// 重新计算开始时间
startTime = Date.now()
} else {
// 继续等待
timer = setTimeout(func, interval)
}
}
}
}
2、组件中引入
SetControl.vue
import AntiShake from "../../components/encapsulation/AntiShake.js";
3、组件中使用
<el-button type="primary" @click="submit"> 提交 </el-button>
methods: {
// 防抖
submit: AntiShake.debounce(function () {
// 需要防抖的内容
this.submitForm();
}, 2000),
// 提交
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$message({
type: "success",
message: "设置成功!",
});
} else {
return false;
}
});
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)