layui弹窗只有在ajax请求结束时之后才关闭，async阻塞

最新推荐文章于 2025-06-14 10:00:00 发布

原创最新推荐文章于 2025-06-14 10:00:00 发布 · 4.4k 阅读

2 ·

CC 4.0 BY-SA版权

layui 同时被 2 个专栏收录

4 篇文章

订阅专栏

layer

2 篇文章

订阅专栏

本文介绍在使用layui框架进行弹窗操作时遇到的问题及解决办法，主要讨论如何正确处理弹窗内的异步加载效果，确保用户体验良好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实践中遇到的坑，在用layui弹窗时，弹窗内容是动态渲染的，在渲染完毕后点击确定请求ajax，但是我想要在点击确定后出现layui的loading，但是总是ajax请求结束之后才加载loading，原因是我在ajax中使用了async：false；去掉即可

layer.open({
    type: 1,
    title: ['请选择要显示的列', 'font-size:1.1rem;','background:#fff !important;','color:black !important;'],
    area: ['500px', '300px'], //宽高
    content: content,
    btn: ['确认', '取消'],
    btn1: function (index, layero) {
        var shezhilieindex = layer.load(1, {
            shade: [0.3, '#E0E0E0'] //
        });
        layer.close(index);
        //选中的列的id
        idList = [];
        var text = $("[class='layui-unselect layui-form-checkbox layui-form-checked']")
       $.each(text,function (i,obj) {
           var content = $($(obj).parent().children()[0]).val();
           idList.push(content);
       });
        console.log(idList);
        $.ajax({
            type: "post",
            url: window.webUrlApi.Load.getListValue,//请求的路径
            dataType: 'json',
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify({
                "page": 1,
                "pageSize": 5,
                "fakeId": sessionStorage.getItem("cid"),
                "idlist": idList,
                "bomid": sessionStorage.getItem("bomid"),
                "code": sessionStorage.getItem("code"),
                "cid": sessionStorage.getItem("bid")
            }),
            async: true,
            success: function (data) { //请求成功后处理函数。
                layer.close(shezhilieindex);
                console.log(data);
                if(data.ok ){
                    columChecked = {};
                    MaterialList(shezhiliei,data.data);
                    console.log("设置列后的数据");
                    console.log(data.data);
                }else {
                    //重置
                    //MaterialList(infoIndex);
                    layer.alert('获取数据失败');
                }

            },
            error: function () {//请求失败处理函数
                console.log('ajaxError! 请求失败');
            }
        });
    },
    btn2: function (index, layero) {
        layer.close(index);
    },
    cancel:function (index, layero) {
        layer.close(index);
    }
});