JS表单提交时无前置console.log致页面重载指令失效问题

这不属于JavaScript的正常运行行为，加console.log()后问题消失完全是巧合，本质是代码逻辑存在竞态冲突，没有从根源解决问题。

你绑定的表单提交回调里，仅在表单校验不通过的分支调用了event.preventDefault()拦截默认行为，校验通过的分支没有做拦截，由此引发了随机故障：

• 表单触发submit事件时，会同时存在两个会触发页面刷新的逻辑抢占执行权：一个是浏览器原生的默认表单提交动作，另一个是你手动编写的document.location.reload(true)重载逻辑
• 两个逻辑的执行先后顺序完全受浏览器当时的任务调度状态影响，没有固定顺序，所以才会出现重载指令绝大多数场景执行失败的问题
• 加console.log()之所以能让问题暂时消失，是因为控制台日志输出是同步IO操作，会占用几毫秒的主线程执行时间，刚好让你写的手动重载逻辑先触发执行，打断了还没来得及启动的原生表单提交流程。这个“修复”完全不可靠，更换浏览器、调整设备负载、换个运行环境都可能让问题再次复现。

额外提示：你代码里写的field.value === NaN判断永远不会生效，因为NaN是JavaScript中唯一和自身不相等的值，判断NaN需要使用Number.isNaN()方法，这个逻辑问题和本次的重载故障无关，属于顺手可修复的代码隐患。

只要在提交回调里，对需要手动控制页面跳转的分支统一拦截默认表单提交行为即可，不要靠加日志碰运气。修复后的参考代码：

myForm.addEventListener('submit', (event) => {
    let fields = [verifyPassword, updateText];
    if (fields.some(field=>(field.value === '' || field.value === null || Number.isNaN(field.value)))){
        event.preventDefault();
        alert('Fill in the form!');
    } else {
        event.preventDefault(); // 拦截默认表单提交，彻底消除竞态
        document.location.reload(true);
    };
});

更简洁的写法是直接在回调入口第一行就调用event.preventDefault()，全流程自主控制表单提交后的逻辑，从写法上避免漏拦截的问题。

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