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