ajax async=>false导致浏览器的渲染阻塞,layui的loading不显示

今天做一个需求，是这么个情况，有个数据报表统计功能，用的layui+ajax，各种坑哦！

在之前提交任务的时候，即使数据错了或者没填都不会提示错误信息，直接将layui的弹出层关闭了，代码长这样

javascript 复制代码

yes: function(index, layero){
  let res = that.insert();
  that.close();
  layer.close(taskLayer);
}

这样就是即使insert方法失败，也会关闭到弹出层。那我们肯定要给他改掉啦

于是，我就一顿操作猛如虎，一看bug到处有。

我改完的代码长这样

js 复制代码

yes: function(index, layero){
  let res = that.insert();
  if(res){
    that.close();
  	layer.close(taskLayer);
  }
}

说明一下，这个res是通过后端返回的code判断的boolean值，是这个样子的

js 复制代码

res = (result.code === 0);

是不是觉得那我这样没有问题呢，我也是这样想的，但是事实并不是这样

完整的代码是这样子的

js 复制代码

var res = false;
$.ajax({
    url: '/*/*/insertTask',
    type: 'post',
    data: JSON.stringify(data),
    dataType: 'json',
    contentType: 'application/json',

    success: function (result) {
        layer.closeAll("loading");
        layer.close(tip)
        res = (result.code === 0);
        defer.resolve(res);
        search.selectTask(search.curPage);
    },
    error: function (e, textStatus, errorThrown) {
        layer.closeAll("loading");
        layer.msg("新增任务失败");
    }
});
return res;

大家看有什么问题呢，它是个异步的ajax，这就导致res = (result.code === 0);这个压根没赋值就返回了res，所以res一直是false；所以后面的关闭弹出层一直不生效！

于是，笨笨的我一下子就想到了，改成同步不就好了，于是加了一行：async:false

然后我就又去继续debug了，发现啊，这个loading动画就是不出来，我就不明白了，于是就开始一顿操作，然后发现，我在开发者模式下debug的时候，这个loading图标是在的，但是不在开发者模式下，这个loading就被吞掉了！

为什么呢？原因就是:浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使我的DOM操作语句是在发起请求的前一句，这个同步请求也会"迅速"将UI线程阻塞，不给它执行的时间。这就是代码失效的原因。

解决方案：jQuery在1.5版本之后，引入了Deferred对象，提供的很方便的广义异步机制。

改造完的代码：

js 复制代码

// 异步要获取参数
var defer = $.Deferred();
layer.load(3);
$.ajax({
    url: '/*/*/insertTask',
    type: 'post',
    data: JSON.stringify(data),
    dataType: 'json',
    contentType: 'application/json',

    success: function (result) {
        layer.closeAll("loading");
        layer.close(tip);
        res = (result.code === 0);
        defer.resolve(res);
        search.selectTask(search.curPage);
    },
    error: function (e, textStatus, errorThrown) {
        layer.closeAll("loading");
        layer.msg("新增任务失败");
    }
});
return defer.promise();

yes: function (index, layero) {
    $.when(that.insert()).done(function (res){
        if (res){
            that.close();
            layer.close(taskLayer);
            layer.msg("新增任务成功，执行完成后将发送邮件至您的邮箱");
        }
    })

于是呼，完美解决！