javascript - 阻止 UI 交互的元素

Question

我想在进行服务器端调用时阻止 UI 交互的 div，并在程序流返回客户端后解除阻止。

如果我不包含 unblock 语句，它会在从服务器端进程返回后进入阻塞状态。似乎一旦点击功能结束，UI 阻塞就会激活。因此，当我在同一函数中同时发出 block 和 unblock 语句时，它会忽略阻塞。如果是这样呢？那我怎样才能产生想要的结果。 (即在调用某些进程之前阻塞屏幕/元素并在流返回时解除阻塞)

以下是我的示例代码:

$("#button").click(function () {

        //$("#sidebar").block({
        //    message: '<h1>1Processing</h1>',
        //    css: { border: '3px solid #a00' }
        //});

        $.blockUI({
            message: '<h1>2Processing</h1>',
            css: { border: '3px solid #a00' }
        });

        var result = DoSomeServerSideProcessing();

        //$("#sidebar").unblock();
        $.unblockUI();
});

附加信息:

DoSomeServerSideProcessing() 使用 XmlHttpRequest() 访问服务器端。我不想更改为 jQuery ajax 调用，因为它已经过测试和成熟的代码块，并且正在从代码中的各个点重新使用。

示例代码:

function DoSomeServerSideProcessing()
{
    var dllUrl=" ... "
    var result = httpGet(dllUrl);
}

function httpGet(theUrl) {
    var xmlHttp = null;

    xmlHttp = new XMLHttpRequest();
    xmlHttp.open('GET', theUrl, false);
    xmlHttp.setRequestHeader('Content-Type', 'text/xml');
    xmlHttp.send(null);
    var strHtml = xmlHttp.responseText;
    xmlHttp = null;

    return strHtml;
}

更新:

我尝试将 XmlHttpRequest() 转换为 $.ajax()。它仍然没有阻止用户界面。代码如下:

(尝试使用和不使用 beforeSend/complete 处理程序。

//$.blockUI();

//alert("before ajax call")

$.ajax({
    url: theUrl,
    type: "GET",
    dataType: "text",
    async: false,
    beforeSend: function () {
        $.blockUI();
    },
    complete: function () {
        $.unblockUI();
    },
    success: function (result) {
        strHtml = result;
        //$.unblockUI();
    }
});

//alert("after ajax call")

Answer 1

假设

DoSomeServerSideProcessing()

是一个带有回调的 AJAX 调用，并且 .blockUI 和 .unblockUI 函数已经在其他地方定义，我会这样做:

    function DoSomeServerSideProcessing(url,callback){
        $.post(url,function(data){
            $.unblockUI();
            callback(data);
        })
    }

    $("#button").click(function () {

        $.blockUI({
            message: '<h1>2Processing</h1>',
            css: { border: '3px solid #a00' }
        });

        var result = DoSomeServerSideProcessing(url,function(data){

        });

    });

因为您希望在返回数据后调用 UnblockUI 函数。