vue 防抖 搜索框防抖 封装全局方法

1、 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数

2、封装一个防抖全局组件

1、在utils文件夹下新建一个debounce.js

2、放入一下代码

import Vue from "vue";
let timeout = null;

/**
 * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
 * 
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行 
 * @return null
 */
function debounce(func, wait = 500, immediate = false) {
	// 清除定时器
	if (timeout !== null) clearTimeout(timeout);
	// 立即执行，此类情况一般用不到
	if (immediate) {
		var callNow = !timeout;
		timeout = setTimeout(function() {
			timeout = null;
		}, wait);
		if (callNow) typeof func === 'function' && func.apply(this, arguments)
	} else {
		// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
		timeout = setTimeout( () => {
			typeof func === 'function' && func.apply(this, arguments);
		}, wait);
	}
}

export default debounce

3、在main.js里面挂载到全局

import debounce from './utils/debounce.js'
Vue.prototype.$debounce = debounce

4、在页面使用

html使用方法 
@input="$debounce(handleproDiscount, 800)" 
 @blur="$debounce(indexBlur($event), 1500)"

JS使用方法
modalOpened() {
      this.visible = true;
      if (!this.resizeHandler) {
        this.resizeHandler = debounce(() => {
          this.refresh()
        }, 100)
      }
     window.addEventListener('resize', this.__resizeHandler)
    },

5、这样可以完整使用