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

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

相关推荐
Trae1ounG7 分钟前
这是json
前端·javascript·vue.js
Dxy123931021611 分钟前
Python 将 JSON 字符串转换为字典
前端·python·json
colicode22 分钟前
语音提醒接口开发方案:日程安排与待办事项自动电话提醒的集成思路
前端·前端框架·语音识别
爱上妖精的尾巴1 小时前
8-8 WPS JS宏 正则表达式 字符组与任选
java·服务器·前端
山岚的运维笔记1 小时前
SQL Server笔记 -- 第34章:cross apply
服务器·前端·数据库·笔记·sql·microsoft·sqlserver
前端程序猿i2 小时前
第 8 篇:Markdown 渲染引擎 —— 从流式解析到安全输出
开发语言·前端·javascript·vue.js·安全
coding随想2 小时前
告别构建焦虑!用 Shoelace 打造零配置的现代 Web 应用
前端
css趣多多2 小时前
resize.js
前端·javascript·vue.js
_codemonster2 小时前
java web修改了文件和新建了文件需要注意的问题
java·开发语言·前端
小冰球2 小时前
前端侦探:我是如何挖掘出网站里 28 个"隐藏商品"的?
前端·vue.js