Vue 如何控制重复点击

在 Vue 开发中，重复点击可能会引发一系列问题，比如多次提交表单、重复发起网络请求，这不仅影响用户体验，还可能导致数据不一致等严重后果。有效地控制重复点击至关重要。

使用防抖函数

防抖函数是指在一定时间内，只有最后一次调用函数才会被执行。在 Vue 中，可以通过自定义指令来实现防抖功能。创建一个防抖函数：

function debounce(func, delay) {
    let timer;
    return function(...args) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

然后，在 Vue 中使用自定义指令来应用这个防抖函数：

Vue.directive('debounce', {
    bind(el, binding) {
        el.addEventListener('click', debounce(binding.value, 300));
    }
});

在模板中使用指令：

<button v-debounce="handleClick">点击</button>

这样，在 300 毫秒内多次点击按钮，只有最后一次点击会触发 handleClick 函数。

使用节流函数

节流函数则是在一定时间内，函数只能被调用一次。实现节流函数如下：

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => {
                inThrottle = false;
            }, limit);
        }
    };
}

同样通过自定义指令使用节流函数：

Vue.directive('throttle', {
    bind(el, binding) {
        el.addEventListener('click', throttle(binding.value, 500));
    }
});

在模板中：

<button v-throttle="handleClick">点击</button>

此时，每 500 毫秒内，按钮的点击事件只能触发一次 handleClick 函数。

禁用按钮

简单粗暴但有效的方法是在点击按钮后禁用按钮。在 Vue 组件中：

<button :disabled="isButtonDisabled" @click="handleClick">点击</button>

export default {
    data() {
        return {
            isButtonDisabled: false
        };
    },
    methods: {
        handleClick() {
            this.isButtonDisabled = true;
            // 执行点击逻辑
            setTimeout(() => {
                this.isButtonDisabled = false;
            }, 1000);
        }
    }
};

通过这种方式，在点击按钮后，按钮会被禁用，直到特定操作完成后再重新启用，从而避免重复点击。通过这些方法，能够有效控制 Vue 应用中的重复点击问题，提升应用的稳定性和用户体验。