表单提交之后还想搞点事情

表单提交之后还想搞点事情

前言

表单提交是浏览器中一个很特殊的事件，它像一个异步事件，submit之后还可以执行后面的代码，直到页面页面跳转。如果提交后好像做点事情，可能会遇到以下两个问题：

1、提交后立即关闭窗口，可能会出现数据只提交了一部分

2、提交后还想执行一些代码

首先确认两个情况：

1、submit()后立即alert()会阻止表单的提交直到点击确定。

2、submit()后的代码都会执行，但不一定生效。

alert是一个神奇的东西它可以暂停代码执行，它也可以阻止页面跳转。

我们在借用一个方法setTimeout，时间设为 0，就代表立即插入队列，但不是立即执行。

直接上代码：

form.submit();  // 表单提交
setTimeout(function(){
    // 准备做一些其它的事情
    setTimeout(function(){              
        a = 10;
        for (var i = 500000000; i >= 0; i--) {
            a += i;
        }
        alert(a);
    }, 0);
    alert('已提交'); //弹出提示，阻止页面跳转
},0);

执行顺序分析：

第一步：表单开始提交

第二步：弹出提示，表单如果还没提交完会继续

第三步：第二个setTimeout里的回调函数开始执行

弹出第一个alert的作用是阻止页面跳转，等用户点击确定表单也差不多提交完了。后面的也基本执行完了。

这代码适用于表单数据不会太大，后面的任务也不会太重的情况。

如果提交完就关闭，可以在alert()后面写关闭代码。

其实以上代码没有任何卵用，chrome中运行效果还勉强够用，但IE11和EDGE绝对让你怀疑人生。

IE11和EDGE有个奇葩的情况，submit()再执行alert()就不提交了，就是说提交事件实际开始之前弹出alert就放弃提交了！谁能解释着到底是为啥？

看来ajax异步提交才是最好的方式，那些gbk代码的项目只能把js放到跳转后的页面去执行了。