Question

我想在JQuery上修改代码，打开弹出服务员，执行ajax加载，然后关闭弹出窗口。第一个版本是这样的：

    $("#SearchInfo").click(function () {
    alert("1.Start function. Open waiter popup");
    OpenWaiterDialog();
    alert("2.Start execution ajax request");

        $.ajax({
            type: "GET",
            url: "/searchParameterInBuildDefinition/SearchInfoByBuilds?nameTeamProject=" + $("#SelectorProjectForSearch").val() + "&searchmessage=" + $("#searchmessage").val(),
            data: "",
            async: false,
            success: function (response) {
                var output = "";
                $.each(response, function (i, item) {
                    //console.log("======================");
                    //console.log("Id:" + response[i]);                
                    output += "<tr><td>" + response[i] + "</td></tr>";
                });
                $("#TableTestCases").show();
                $('#BodyTable').html(output);
            },
            dataType: "json"//set to JSON  

        })

    alert("3.Request finish. Close popup");

    CloseWaiterDialog();
});

当我执行此功能时，浏览器冻结（Microsoft Edge），并在收到ajax数据后，显示消息3,1,2。

我试过短功能：

        $.when($.when(OpenWaiterDialog()).then(SearchInfoInBuildDefinition())).then(CloseWaiterDialog());

但即使在这种情况下，网页冻结了ajax请求，也可以绘制服务器弹出窗口，并且无法关闭弹出窗口。我怎样才能解决这个问题。它可能为UI提供更大的优先级吗？

Answer 1

无需使用async:false，只需链接CloseWaiterDialog即可在ajax调用的.always()中运行。

$("#SearchInfo").click(function () {
    OpenWaiterDialog();

    $.ajax({
        type: "GET",
        url: "/searchParameterInBuildDefinition/SearchInfoByBuilds?nameTeamProject=" + $("#SelectorProjectForSearch").val() + "&searchmessage=" + $("#searchmessage").val(),
        data: "",,
        dataType: "json"//set to JSON  
    }).then(function (response) {
        var output = "";
        $.each(response, function (i, item) {
            //console.log("======================");
            //console.log("Id:" + response[i]);                
            output += "<tr><td>" + response[i] + "</td></tr>";
        });
        $("#TableTestCases").show();
        $('#BodyTable').html(output);
    }).always(function(){
        CloseWaiterDialog();
    });
});

如何逐个执行功能

1 个答案: