在VUE里面用ES6的Proxy封装防抖、节流函数,并在组件里面使用
在我的项目目录src/utils下面新建一个currencyFunction.js用来放一些通用的全局函数
在js文件抛出方法
/**
* 通用防抖函数
* fn:传入的方法
* rate:延迟时间 毫秒 时间内再次触发刷新时间
* immediate:true 立即执行 false 不立即执行
* **/
export function debounce(fn, rate=300,immediate=true) {
let timer;
return new Proxy(fn, {
apply(target, ctx, args) {
if (timer) {
clearTimeout(timer);
}
if(immediate){
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, rate)
if (callNow) {
return Reflect.apply(target, ctx, args);
}
}else{
timer = setTimeout(() => {
return Reflect.apply(target, ctx, args);
}, rate)
}
},
})
}
/**
* 通用节流函数
* fn:传入的方法
* rate:时间 毫秒 规定时间内触发第一次
* **/
export function throttle (fn, rate=1000) {
let lastTime = 0;
return new Proxy(fn, {
apply(target, ctx, args) {
const now = Date.now();
if (now - lastTime > rate) {
lastTime = now;
return Reflect.apply(target, ctx, args);
}
},
});
};
在组件里面使用
<script>
import {debounce, throttle} from '@/utils/currencyFunction'
export default {
data() {
return {
};
},
methods: {
changeSelect:throttle((value)=>{
console.log('调用测试方法',value)
},5000),
}
};
</script>