在在vue中使用防抖函数组件操作中使用防抖函数组件操作
初级初级
1、先写好防抖函数
/**
* @desc 防抖函数
* @param {需要防抖的函数} func
* @param {延迟时间} wait
* @param {是否立即执行} immediate
*/
export function debounce(func, wait, immediate) {
let timeout
return function(...args) {
let context = this
if (timeout) clearTimeout(timeout)
if (immediate) {
let callNow = !timeout
timeout = setTimeout(function() {
timeout = null
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function() {
func.apply(context, args)
}, wait)
}
}
}
2、然后在要使用的组件里 import 进来
import { debounce } from 'xxx'
export default {
data: {
return {
vm: this
}
},
methods: {
toDoSth: debounce((vm) => {
// 这里将当前组件实例当参数传入
// 就可以使用实例中定义的一些属性、方法
// 补充一下，这里如果换成非箭头函数的写法，也可以直接访问实例。
},
500,
true
)
}
}
3、在组件方法中使用
template:
<div @click=”toDoSth(vm)”></div>
高级高级
虽然上面的写法已经能解决问题了，但是总觉得不够美观。
在网上搜索一番，看到有个哥们将防抖封装成一个组件，果然和我想的一样。不过这哥们直接将上下文当参数传进来了，比我
把整个实例传进来高明，我在这个基础上添加了 immediate 的功能，还有添加了默认不传 event 参数的情况处理。
debounce.js 文件：
资源评论
weixin_38696582
- 粉丝: 5
- 资源: 953
最新资源
- 【国泰君安期货-2024研报】镍：宏观与基本面共振承压，镍价短期低位震荡，不锈钢：高库存边际微降，成本有所下移.pdf
- Matlab实现CNN-LSTM-Mutilhead-Attention卷积长短期记忆神经网络融合多头注意力机制多变量时间序列预测（含完整的程序，GUI设计和代码详解）
- Android Studio Ladybug（android-studio-2024.2.1.12-linux.zip.002）
- 医疗知识图谱的构建及应用(平安医疗)
- SNIA多应用解决方案的高速六通道无屏蔽连接器标准规范
- Matlab实现CPO-LSTM 冠豪猪优化长短期记忆神经网络多变量回归预测（含完整的程序，GUI设计和代码详解）
- Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多输入单输出回归预测（含完整的程序，GUI设计和代码详解）
- Android Studio Ladybug（android-studio-2024.2.1.12-linux.zip.001）
- 计算机专业学习资源大全
- MATLAB实现CEEMDAN+SE自适应经验模态分解+样本熵计算（含完整的程序，GUI设计和代码详解）
- Matlab实现PSO-CNN粒子群优化卷积神经网络多输入多输出预测（含完整的程序，GUI设计和代码详解）
- docker一键部署脚本 lilishop是docker及k8s脚本
- Matlab实现CPO-VMD基于冠豪猪优化算法(CPO)优化VMD变分模态分解时间序列信号分解（含完整的程序，GUI设计和代码详解）
- 最大公约数和最小公倍数.cpp
- MATLAB实现SSA-CNN-GRU-Attention多变量回归预测（SE注意力机制）（含完整的程序，GUI设计和代码详解）
- Linux操作系统使用教程全集-教学
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
