Vue使用节流函数【保姆级教学】

原理

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

适用

例:（连续不断动都需要调用时用，设一时间间隔），像dom的拖拽，如果用消抖的话，就会出现卡顿的感觉，因为只在停止的时候执行了一次，这个时候就应该用节流，在一定时间内多次执行，会流畅很多

<template>
    <view class="content">
        <button @click="getTrottle" type="default">节流按钮</button>
    </view>
</template>

<script>
// func是用户传入需要防抖的函数
// wait是等待时间
const throttle = (func, wait = 50) => {
    // 上一次执行该函数的时间
    let lastTime = 0;
    return function(...args) {
        // 当前时间
        let now = +new Date();
        // 将当前时间和上一次执行函数时间对比
        // 如果差值大于设置的等待时间就执行函数
        if (now - lastTime > wait) {
            lastTime = now;
            func.apply(this, args);
        }
    };
};
export default {
    data() {
        return {
            title: 'Hello',
            getTrottle: undefined
        };
    },
    created() {
        this.getTrottle = throttle(this.onBtn,3000)
    },
    onLoad() {},
    methods: {
        onBtn() {
            console.log('节流')
        }
    }
};
</script>