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

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

相关推荐
We་ct19 分钟前
LeetCode 173. 二叉搜索树迭代器:BSTIterator类 实现与解析
前端·算法·leetcode·typescript
weixin_3954489124 分钟前
main.c_0222cursor
c语言·前端·算法
无尽的沉默44 分钟前
Thymeleaf 表达式
java·开发语言·前端
无尽的沉默1 小时前
Spring Boot 整合 Thymeleaf 模板引擎
java·前端·spring boot
We་ct1 小时前
从输入URL到页面显示的完整技术流程
前端·edge·edge浏览器
先做个垃圾出来………1 小时前
DeepDiff差异语义化特性
服务器·前端
蓝帆傲亦1 小时前
前端常用可视化图表组件大全
前端
CappuccinoRose2 小时前
HTML语法学习文档(九)
前端·学习·架构·html5
NEXT062 小时前
BFC布局
前端·css·面试
菜鸟小芯2 小时前
【GLM-5 陪练式前端新手入门】第四篇:卡片布局 —— 让个人主页内容更有层次
前端·人工智能