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

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

相关推荐
00后程序员张1 分钟前
有些卡顿不是 CPU 的问题,还要排查磁盘 I/O
android·ios·小程序·https·uni-app·iphone·webview
白开水都有人用1 分钟前
点击数据行选中复选框-抽离公共方法
java·前端·html
Aftery的博客2 分钟前
HBulider项目打包上传到App Store需要的证书和私钥文件
uni-app·cocoapods
weixin1997010801615 分钟前
《电子元器件商品详情页前端性能优化实战》
前端·性能优化
Southern Wind17 分钟前
Vue 3 + Naive UI 企业级后台管理系统完整解析
前端·vue.js·ui·typescript
清汤饺子18 分钟前
AI 编程新范式:Spec First 的四件套,让 AI 不再是"热情但跑偏的实习生"
前端·javascript·后端
weixin1997010801618 分钟前
《建材网商品详情页前端性能优化实战》
前端·性能优化
LXXgalaxy19 分钟前
小程序文件上传怎么做?一套可复用的 UniApp 上传+预览 Demo
javascript·vue.js·uni-app
程序员 沐阳22 分钟前
从缓慢等待到瞬间响应:Vite 如何重塑前端开发体验
前端·前端框架
wangjinsheng59324 分钟前
Vue3 + Element Plus 前端 AI 编码模板
前端·vue.js·ai·elementui·ai编程