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

---

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

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