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获取不到

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

相关推荐
问心无愧05133 小时前
ctf show web入门160 161
前端·笔记
李小白663 小时前
第四天-WEB服务器基本原理,IIS服务
运维·服务器·前端
humcomm4 小时前
AI编程时代新前端职位
前端·ai编程
好家伙VCC4 小时前
Web Components主题热切换方案揭秘
java·前端
甲维斯4 小时前
Kimi版超级玛丽效果“惊人”,配额不足5厘米!
前端·人工智能
hboot4 小时前
AI工程师第一课 - Python
前端·后端·python
凉菜凉凉5 小时前
AI时代,被抛弃的前端
前端·ai
console.log('npc')5 小时前
AI前端工程与生成式UI学习路线
前端·人工智能·ui
梦曦i5 小时前
uni-router v1.1.1发布:守卫超时保护+路由监听
前端·uni-app
qq_2518364575 小时前
基于java Web网络订餐系统设计与实现 源码文档
java·开发语言·前端