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

古城微笑少年丶 2022-02-28 07:34 467阅读 0赞

*  ## 遮罩不生效 ##

直接设置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的单线程体现)，这是回调函数和普通函数公用的一个队列。

*  ## 题外话 ##

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

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