uniapp实现事件级防抖

背景:

uniapp项目中所有页面跳转都会触发多次点击事件,导致页面排版错乱或其他问题

在utils文件夹下创建debounce.js文件

javascript 复制代码
export const Debounce = (fn, wait) => {
	let delay = wait || 500
	let timer
	return function() {
		let args = arguments;
		if (timer) {
			clearTimeout(timer)
		}

		let callNow = !timer
		timer = setTimeout(() => {
			timer = null
		}, delay)
		if (callNow) fn.apply(this, args)
	}
}

使用方式

在需要使用防抖的页面引入方法

javascript 复制代码
import { Debounce } from "@/utils/debounce.js";

页面使用

javascript 复制代码
// 原方法
methodName(type) {
	console.log(type)
}
// 修改后方法
methodName: Debounce(function(type) {
	// 逻辑代码
	console.log(type)
}, 1000),

注意: 不要使用箭头函数 () => {}, 会导致this获取不到

如果有更合理或者更好的防抖方法,希望可以多多指教

相关推荐
一拳不是超人21 小时前
从“必选项”到“性能包袱”:为什么现代框架开始“抛弃”虚拟 DOM?
前端·javascript·架构
田里的水稻1 天前
OE_ubuntu24.04如何安装中文简体拼音输入法
运维·前端·chrome
wordbaby1 天前
🚀 从零到一实战:基于 Taro 构建纯血鸿蒙 (HarmonyOS NEXT) 应用踩坑全指南
前端
慧一居士1 天前
ESM 在前端开发中的介绍和使用指导
前端
禾味1 天前
过程即奖励|前端转后端经验分享
前端·后端·面试
苡~1 天前
【openclaw+claude】手机+OpenClaw+Claude实现远程AI编程系列大纲
java·前端·人工智能·智能手机·ai编程·claude api
Ryan今天学习了吗1 天前
前端知识体系总结-前端工程化(Webpack篇)
前端·面试·前端工程化
Ryan今天学习了吗1 天前
前端知识体系总结-前端工程化(Babel篇)
前端·面试·前端工程化
GISer_Jing1 天前
基于 OpenClaw 构建 博客自动撰写 Agent
前端·aigc·ai写作
潜水豆1 天前
基于cursor 的自用专家系统v0.2
前端