一、节流和防抖的定义
节流:频繁输入、频繁操作的时候,保持一定频率连续触发,比如 scroll 事件、click 事件。
防抖:频繁输入、频繁操作的时候,在最后才触发事件处理函数,比如 input 输入事件。
关于节流和防抖的更多细节,本篇文章不做重点介绍,想了解可以阅读 《防抖debounce和节流throttle》
二、在 vue项目 中使用防抖和节流
在 vue 项目中,想要给 methods 中的某个方法 fn 增加节流或防抖,应该如何实现?
以节流为例(防抖功能类似):
1、节流函数 throttle 封装
公共类 utils.js 中封装节流函数 throttle,方便全局调用
javascript
export const throttle = (fn, delay = 100) => {
let timer = null
return function () {
if (timer) return
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
2、引入并使用节流函数 throttle
在需要的页面引入节流函数,使用节流函数包裹要进行节流的方法 fn
javascript
在这里插入代码片
import { throttle } from '@/utils/utils.js'
methods: {
fn: throttle(function() {
// 业务逻辑
}, 200)
}
注意:
在vue中,methods中的方法不可以使用箭头函数,
因为箭头函数本身没有this,箭头函数的this会指向父级的this,
如果使用了箭头函数,fn中的this会指向父级的this(window),不再指向vue实例,
同理,使用节流函数throttle包裹的方法,也不能使用箭头函数。