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

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

相关推荐
IT_陈寒3 分钟前
Vue的v-for为啥把我的渲染顺序搞乱套了?
前端·人工智能·后端
sir.山36 分钟前
在 Vue 3 项目中使用 Mock 数据
前端·vue.js·vue3·vite
李剑一1 小时前
华为新上Pura X View阔直板手机,特殊屏幕比例设备下,前端应该怎么去适配更完美?送你一套完整工具代码
前端
0xBADCODE1 小时前
Flask SSTI读SECRET_KEY+伪造Session:税务系统渗透全流程
前端·后端·python·安全·web安全·网络安全·flask
01_ice1 小时前
html个人简历展示
前端·html
程序员爱钓鱼1 小时前
Rust where详解:让泛型与Trait约束更加清晰
前端·后端·rust
zzzzzz3102 小时前
react-bits 为什么会吸引前端开发者:别把动效当装饰,先把它当成页面能力
前端·react.js·动效
风月说与山鬼4 小时前
二、React入口文件(main.jsx)
前端·react.js
东风破_9 小时前
Docker 基础:为什么需要容器?
前端·后端·nginx
东风破_9 小时前
Docker 实战:使用 Nginx 作为容器入口代理 Node 服务
前端·后端·nginx