当 jQuery ajax 调用开始时，loadmask 没有触发

Posted 2023-02-26

【中文标题】当 jQuery ajax 调用开始时，loadmask 没有触发

【英文标题】：When jQuery ajax call started, loadmask is not firing

【发布时间】：2013-07-20 10:39:49

【问题描述】：

当使用async:false loadmask 调用的 jQuery ajax 没有触发时。 即使我在 ajax 之前调用：

$("#d").on("click", function () 
    $("#d").mask("Waiting...");
    fn();
    $("#d").unmask("Waiting...");
);

完整代码如下：

<link href="jquery.loadmask.css" rel="stylesheet" type="text/css" />
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="jquery.loadmask.js" type="text/javascript"></script>

<div id="d" style="border: 1px solid red; width: 300px; height: 200px">asdfasdf</div>
<script>

    $(function () 
        $("#d").on("click", function () 
            fn();
        );
    );

    function fn() 
        var a = JSON.stringify(
            text: 'some text',
            array: [1, 2, 'three'],
            object: 
                par1: 'another text',
                par2: [3, 2, 'one'],
                par3: 
            
        );
        var data = 
            json: a,
            delay: 3
        


        $.ajax(
            url: "http://jsfiddle.net/echo/json/",
            data: data,
            type: "POST",
            async: false,
            beforeSend: function (response) 
                $("#d").mask("Waiting...");
            ,
            success: function (response) 
                console.log(response);
            ,
            complete: function () 
                $("#d").unmask("Waiting...");
            
        );

    
</script>

【问题讨论】：

不做同步 异步 Javascript 和 XML 的另一个原因！

抱歉这个粗俗的问题，但你有 jQuery 吗？在您的完整代码部分中看不到 jQuery...

@intuitivepixel，是的，我做到了，您可以在顶部代码中看到。

@adeneo，我需要等到接收完成。

在代码的顶部，确切地说，那里没有包含 jQuery 文件！

【参考方案1】：

这是因为浏览器线程被 ajax 等待阻塞了。一个解决方案是使用 setTimeout()。

试试

$("#d").on("click", function () 
    $("#d").mask("Waiting...");
    setTimeout(function()
        fn()
        $("#d").unmask("Waiting...");
    , 1);
);

【参考方案2】：

由于您的调用是异步脚本未加载jQuery $(document).ready and UpdatePanels?

我认为这会奏效

  function BindEvents()
        $("#d").on("click", function () 
            $("#d").mask("Waiting...");
            fn();
            $("#d").unmask("Waiting...");
        );
     

    $(document).ready(function () 
         BindEvents();
    );

    <script type="text/javascript">
        // Create the event handler for PageRequestManager.endRequest
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(BindEvents);
    </script>