解决Vue、小程序、uniapp多次触发事件多次发起请求,添加防抖功能:

解决Vue、小程序、uniapp多次触发事件多次发起请求,添加防抖功能:,第1张


当触发点击事件,发起请求,如果没有做防抖处理,很容易发起多次请求

1.在main.js中将js包引入,挂载在全局使用

	import Vue from 'vue'
	import App from './App'
	//  1.先在全局引入
	import debounce from "@/common/debounce"
	Vue.config.productionTip = false
	App.mpType = 'app'
	//  2.再挂载在全局
	Vue.prototype.$debounce = debounce;
	const app = new Vue({
	    mounted: init,
	    ...App
	})
	app.$mount()
	
		}

2.在点击事件函数名 换为 防抖函数名

	<button  @click="touchOffDebounce">提交</button>

3.将需要添加防抖的函数写在函数中即可。

		//提交增加防抖
		touchOffDebounce(){
			// 第一个参数为当前需要添加防抖的函数名 ***不需要加括号
			// 第二个为延时执行函数的时间
			// 第三个是否立即执行
			this.$debounce(this.submit, 2000, true)
		},
		submit() {
		// 需要添加防抖事件的函数
		}

4.将这段代码封装为js包,放入项目(在网上找的别人封装好的包,不知道出处在哪了)

let timeout = null;

/**
 * 防抖原理:一定时间内,只有最后一次 *** 作,再过wait毫秒后才执行函数
 * 
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行 
 * @return null
 */

function debounce(func, wait = 300, immediate=false) {
	
	// 清除定时器
	if (timeout !== null) clearTimeout(timeout);
	
	if (immediate) {
		// 立即执行,此类情况一般用不到
		var callNow = !timeout;
		timeout = setTimeout(function() {
			timeout = null;
		}, wait);
		if (callNow) typeof func === 'function' && func();
	} else {
		// 设置定时器,当最后一次 *** 作后,timeout不会再被清除,所以在延时wait毫秒后执行func回调方法
		timeout = setTimeout(function() {
			typeof func === 'function' && func();
		}, wait);
	}
}

export default debounce

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/941674.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表(0条)

保存