调用e.preventDefault()取消表单提交时如何通用隐藏gif加载动画

该需求完全可以实现，问题的根因是你当前绑定的两个表单提交事件执行顺序存在问题：显示加载图的事件先触发，后执行的验证逻辑即使阻止了提交，也没有对应逻辑隐藏已经显示的加载层。

通用解决方案 #

你可以使用全局事件监听逻辑，不需要修改原有业务验证代码，只要任意表单提交被阻止就自动隐藏加载层，实现代码如下：

$(document).ready(function () {
    // 全局监听所有表单的提交事件
    $(document).on('submit', 'form', function (e) {
        // 延迟0ms执行，等待所有当前绑定的提交处理逻辑执行完成
        setTimeout(() => {
            // 判断提交事件是否被阻止
            if (e.isDefaultPrevented()) {
                // 停止加载层所有未完成的动画，直接隐藏
                $('#pageloader').stop(true, true).fadeOut();
            }
        }, 0);
    });
});

可选优化方案（更稳妥） #

如果你可以调整原有事件绑定顺序，也可以把加载层显示逻辑移到验证通过之后，从根源避免验证不通过时加载层被显示：

// 移除原有两个独立的submit事件绑定，合并为统一处理逻辑
$(document).ready(function () {
    $("form").on("submit", function (e) {
        // 先执行验证逻辑
        if (!validData()) {                        
            e.preventDefault();                         
            return false;
        }
        // 验证通过后再显示加载层
        $("#pageloader").fadeIn();
        return true;
    });
});

方案说明 #

• setTimeout(()=>{},0)会把判断逻辑放到JS事件队列末尾，等待所有同步的提交处理函数（包括你的验证逻辑）全部执行完成后再运行，不会影响原有业务逻辑的执行顺序
• stop(true,true)会清空加载层的动画队列，直接跳转到动画最终状态，避免多次点击提交时出现动画残留的问题
• 以上方案对全站所有表单都生效，不需要为每个表单单独加适配逻辑

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