jquery遮罩层不显示问题，涉及线程互斥

yangyang_VV

于 2023-01-07 14:22:20 发布

阅读量295

点赞数

文章标签： jquery javascript

原文链接：https://blog.csdn.net/weixin_42334239/article/details/83503508

版权

在业务需求中，必须使用Ajax同步上传资源，因长耗时需显示遮罩层防止用户误操作。然而，同步设置会阻塞UI线程，导致遮罩层无法即时显示。解决方案包括使用异步请求或在显示遮罩层的回调函数中执行Ajax，确保遮罩层在同步请求开始时显示。

摘要由CSDN通过智能技术生成

第二次遇到了，记录下
业务需求：
上传资源，由于某种原因必须用到ajax同步去上传。上传时耗时较长，为避免用户再上传过程中误操作，需要加遮罩层。

猜到的坑：
正常情况下，如果是异步是没有任何问题的。

function upload(){
    $("#mask").show();    //显示遮罩层
    $.ajax({
        url:"xxxx",
        async:true,        //异步
        success:function(res){
            $("#mask").hide();    //隐藏遮罩层
        }
    })
}

如果设为同步（async:false），遮罩层不显示。

原因：浏览器引擎分为 js引擎和渲染（UI）引擎。js引擎负责解析js脚本代码，渲染引擎负责渲染页面。当ajax设置为同步时，由于js线程和UI线程是互斥的，当执行ajax的时候，js线程耗时操作，此时会阻塞UI线程，当ajax执行完成的时候才会显示遮罩层。

解决方案：

1、设置async为true，异步去访问。
2、使用jQuery的$(“#mask”).show(function(){});方法。

function upload(){
    $("#mask").show(function(){    //显示遮罩层，在回调中执行ajax
        $.ajax({
            url:"xxxx",
            async:false,        //同步
            success:function(res){
                $("#mask").hide();    //隐藏遮罩层
            }
        })
    });    
}