ajax请求 遮罩不生效解决方案以及引发思考

• 遮罩不生效

直接设置ajax的beforeSend:loadMask()以及unLoadMask()后遮罩并没有显示出来。

debug进行调试，发现遮罩生效了只是在正常请求模式下没有展示出来而已。听起来似乎这句话有点别扭，实际上就是渲染线程被阻塞了。

• 解决方案

       $.ajax({        	
            async: true, //直接设置请求为异步，或者删除这一行ajax默认异步
            url: _uri,
            type: 'POST',
            dataType: "JSON",
            data: {
            },
            beforeSend:loadMask(),
            success: function (data) {
	            unLoadMask();
                alert('成功');
            },
            error: function () {
            	unLoadMask();
            	alert('失败');
            }
        });

因ajax设置了同步，而GUI渲染线程与JS引擎线程是互斥的，所以此时渲染线程被阻塞导致遮罩的样式没有被加载出来。

而直接设置ajax请求为异步的时候，浏览器会新开一个线程来执行，当然回调的时候还是js的单线程性。只是此时GUI渲染线程不会被阻塞。

• 拓展

1.GUI渲染线程

负责渲染浏览器界面，解析HTML，CSS，构建DOM树，布局和绘制等等。

当界面需要重绘时，该线程就会执行

2.JS引擎线程

JS引擎线程负责解析Javascript脚本，运行代码。

JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序

注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。(这就是出现以上ajax请求阻塞了渲染线程的原因所在)

3.事件触发线程

归属于浏览器而不是JS引擎，用来控制事件循环，当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中

当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理

注意，由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）

4.定时触发器线程

setInternal与setTimeout所在线程，浏览器定时计数器并不是由JavaScript引擎计数的,（因为JS引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确），因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）

5.异步http请求线程

在XMLHttpRequest在连接后是通过浏览器新开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

• 盲区

可能会有人不是很理解JS的单线程，明明ajax是一种异步请求，为什么js还是单线程的呢。其实实现多线程的是浏览器，在需要异步请求的时候由浏览器新开一个线程来执行其方法，在请求结束之后可以利用回调函数进行执行获得的参数处理等等。实现的方式是将请求放入一个JS的执行队列中依次执行(这也是JS的单线程体现)，这是回调函数和普通函数公用的一个队列。

• 题外话

也幸好是同事觉得这个小问题不知道怎么解决，随便就丢给我让我帮忙解决一下，自己才有机会去处理并且学习。总之，解决问题就是对自己的一个提升。

如果我的这篇文章对你有帮助或者有任何疑点都欢迎在评论区交流！