javascript - 通过 Ajax 发送请求时如何停止挂起页面

Question

我面临一个严重的问题...每当我使用 Ajax 发送请求并获得响应时，我的浏览器就会挂起...并且显示没有加载等...

但是当我从 Ajax 检索响应时，浏览器和页面再次开始工作...

下面是我使用的代码......

function ShowContestStatus(contestID)
{
    $("#showContestDetails").html('<div class="loadercontest"><img src="assets/images/loading.gif">Loading Contest....</div>');

    $("#RadioGroup1_0, #RadioGroup1_1, #RadioGroup1_2").prop('disabled', true);
    $.ajax({
            url:"process/processMyContest.php",
            type:'POST',
            cache:false,
            async:false,
            data : {act : 'showcontest', cid : contestID },
            success:function(result)
            { 
                $("#showContestDetails").html(result);
                $("#RadioGroup1_0, #RadioGroup1_1, #RadioGroup1_2").prop('disabled', false);
            }
        });
    }

请帮助我...当您发送请求时，我想得到与其他网站相同的响应，并且他们使用ajax，页面既没有挂起，而且每个处理(例如滚动等)都是可见的..... .

所以请给我提出好主意......这样我就可以摆脱它并使我的ajax页面平滑，而不会因挂起而影响和激怒其他人......

提前致谢...:)

Answer 1

问题是async:false...由于您的ajax请求是同步的，脚本执行将等待请求完成才能继续..

由于浏览器使用单线程执行模式(它将执行脚本或重新绘制或一次等待用户事件 - 不是同时)，您的浏览器选项卡将停止监听用户(因此它看起来像已挂起)

function ShowContestStatus(contestID) {
    $("#showContestDetails").html('<div class="loadercontest"><img src="assets/images/loading.gif">Loading Contest....</div>');

    $("#RadioGroup1_0, #RadioGroup1_1, #RadioGroup1_2").prop('disabled', true);
    $.ajax({
        url: "process/processMyContest.php",
        type: 'POST',
        cache: false,
        //remove async: false,
        data: {
            act: 'showcontest',
            cid: contestID
        },
        success: function (result) {
            $("#showContestDetails").html(result);
            $("#RadioGroup1_0, #RadioGroup1_1, #RadioGroup1_2").prop('disabled', false);
        }
    });
}

Ajax.async

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().