Vue封装全局防抖节流函数

一：目录结构二：utils.js文件/* 防抖节流函数 */let timeout = null // 创建一个标记用来存放定时器的返回值let canRun = true;//!!!!这里一定要把变量设在外面，不然会失效！我搞了好久才搞明白！export func...

一：目录结构

二：utils.js文件

/* 防抖节流函数 */
let timeout = null // 创建一个标记用来存放定时器的返回值
let canRun = true;
//!!!!这里一定要把变量设在外面，不然会失效！我搞了好久才搞明白！
export function debounce(fn) {
	return function() {
		clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉 
		timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
			fn.apply(this, arguments)
		}, 2000)
	}
}
export function throttle(fn) {
	return function() {
		if (!canRun) return
		canRun = false
		setTimeout(function() {
			fn.apply(this, arguments)
			canRun = true
		}, 3000);
	}
}

三：main.js全局引入

import * as utils from '../common/utils.js';
//这样才行，我也不知道为什么，反正就是需要多一个 * as
Vue.use(utils)//引用这个utils
Vue.prototype.$utils = utils //全局请求方法

四：使用方法

//在任意文件：注意这里要手动调用，因为返回的是一个函数。
this.$utils.debounce(fn)();