遮罩不生效

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

题外话

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

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