如何避免AJAX请求中因双击触发重复操作？

问题根源是双击按钮会触发两次onclick事件，导致createIt函数执行两次、发起两次AJAX请求，最终生成两条重复记录。通过添加防重复提交机制即可解决，修改后的代码如下：

修改后的JavaScript代码 #

// 全局锁变量，标记当前是否处于提交状态
let isSubmitting = false;

function createIt() {
    // 若正在提交，直接终止函数执行
    if (isSubmitting) return;

    const comment = $('textarea[name="comment"]').val().trim();
    const errorBox = $('#comment_error');

    // 清空之前的错误提示，避免多次触发时错误信息重复叠加
    errorBox.empty();

    if (!comment) {
        errorBox.append("请输入评论");
        return;
    }

    // 标记为提交中，同时禁用按钮增强用户感知
    isSubmitting = true;
    $('#add_it').prop('disabled', true);

    BX.ajax.runComponentAction('register:feedback', 'createIt', {
        mode: 'class',
        data: {
            post: {
                COMMENT: comment,
            }
        },
    }).then(function (response) {
        if (response.status === 'success') {
            $('.formAction').hide();
            $('input[name="go"]').trigger('click');
        } else {
            alert(response.errors);
        }
    }).catch(function() {
        // 捕获网络错误等异常情况
        alert('请求失败，请稍后重试');
    }).finally(function() {
        // 无论请求成功/失败，都重置提交状态和按钮可用性
        isSubmitting = false;
        $('#add_it').prop('disabled', false);
    });
};

关键改动说明 #

• 添加isSubmitting锁变量：函数执行前先判断提交状态，直接拦截重复触发的请求
• 提交前清空错误提示：避免多次触发时错误信息重复叠加
• 禁用提交按钮：给用户直观的“正在处理”反馈，同时物理防止再次点击
• 使用finally块：确保请求完成后（无论成功或失败）都会重置状态，不影响后续正常提交

可选优化：替换内联事件绑定 #

如果想进一步规范代码，可以移除HTML中的onclick="createIt()"，改用jQuery事件绑定：

// 页面加载完成后绑定点击事件
$(document).ready(function() {
    $('#add_it').on('click', createIt);
});

内容的提问来源于stack exchange，提问作者Vlad