jQuery在请求返回前增加遮罩问题

好久没有使用jquery了；做了个小工具没有前端东西突然要用到了；就想到了jquery；为了增加用户体验体验，增加了一个页面，增加了用户点击按钮后的响应遮罩的显示和隐藏；

 增加div

    <div id="loading-mask">
      <div id="loading-spinner"></div>
    </div>

增加css

#loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display:none
}

#loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 5px solid #fff;
  /* border-top-color: #888; */
  border-radius: 50%;
  animation: spin 1s infinite linear;
  
  border-top-color: #333;
 /*  background: conic-gradient(#89e31feb 0%, #89e31feb 33%, #e838daeb 66%, #89e31feb 100%); */

}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

js代码实现显示和关闭

//提交
    $(".btn").click(function(){
      $.ajax({
    	    url: 地址,
    	    data: $("form").serialize(),
    	    type: "post",
    	    /* async:false, */
    	    dataType: "json",
    	    beforeSend:function(){
    	    	$('#loading-mask').show();//显示遮罩
    	    },
    	    success: function(data) {
    	    	console.log(data);
	    		 $('#loading-mask').hide();//隐藏遮罩
    	    }
    	});
    });

遇到的坑————————遮罩不显示

因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引擎执行。