一:目录结构
二: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)();