VUE里面用ES6 Proxy 封装防抖、节流函数

在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>