js如何防止重复点击 js防止重复提交的3种解决方案

js防止重复点击的3种实用解决方案

在前端交互场景中，用户可能因为网络延迟、操作习惯等原因快速多次点击提交按钮，导致同一个请求被发送多次，引发数据重复创建、接口报错等问题。下面介绍3种基于js的防止重复点击、重复提交的解决方案，开发者可以根据业务场景选择使用。

方案一：通过按钮状态控制提交

这种方案的核心思路是在用户点击提交按钮后，立即禁用按钮，直到请求完成或者超时后再恢复按钮的可点击状态，适合表单提交、支付提交等场景。

// 获取提交按钮元素
const submitBtn = document.getElementById('submitBtn');
// 标记是否正在提交
let isSubmitting = false;

submitBtn.addEventListener('click', function() {
    // 如果正在提交，直接返回
    if (isSubmitting) {
        return;
    }
    // 设置提交标记
    isSubmitting = true;
    // 禁用按钮
    submitBtn.disabled = true;
    submitBtn.textContent = '提交中...';
    
    // 模拟发送请求
    setTimeout(() => {
        // 请求完成后恢复按钮状态
        isSubmitting = false;
        submitBtn.disabled = false;
        submitBtn.textContent = '提交';
        console.log('提交完成');
    }, 2000);
});

方案二：使用防抖函数处理重复点击

防抖的原理是：在事件触发后，等待一段时间再执行回调函数，如果在这段时间内事件再次触发，就重新计时。适合搜索输入、按钮点击等场景，避免短时间内多次触发。

// 防抖函数实现
function debounce(fn, delay) {
    let timer = null;
    return function(...args) {
        // 如果已有定时器，清除重新计时
        if (timer) {
            clearTimeout(timer);
        }
        // 设置新的定时器
        timer = setTimeout(() => {
            fn.apply(this, args);
            timer = null;
        }, delay);
    };
}

// 提交逻辑函数
function handleSubmit() {
    console.log('执行提交操作');
    // 这里写实际的请求发送逻辑
}

// 获取按钮并绑定防抖后的点击事件
const submitBtn2 = document.getElementById('submitBtn2');
const debouncedSubmit = debounce(handleSubmit, 1000);
submitBtn2.addEventListener('click', debouncedSubmit);

方案三：使用节流函数处理重复点击

节流的原理是：在指定时间内，只允许事件触发一次回调函数，即使这段时间内多次触发，也只会执行一次。适合滚动加载、按钮频繁点击等场景。

// 节流函数实现
function throttle(fn, interval) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        // 如果距离上次执行时间超过间隔时间，才执行
        if (now - lastTime >= interval) {
            lastTime = now;
            fn.apply(this, args);
        }
    };
}

// 提交逻辑函数
function handleSubmit2() {
    console.log('执行提交操作');
    // 这里写实际的请求发送逻辑
}

// 获取按钮并绑定节流后的点击事件
const submitBtn3 = document.getElementById('submitBtn3');
const throttledSubmit = throttle(handleSubmit2, 1000);
submitBtn3.addEventListener('click', throttledSubmit);

三种方案对比

开发者可以根据实际业务需求选择合适的方案，也可以将多种方案结合使用，比如先通过按钮状态控制，再搭配防抖或节流函数，进一步提升防重复点击的效果。

js防止重复点击防止重复提交防抖节流修改时间：2026-06-11 22:57:35