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

Question

I am facing a serious issue... Whenever i use Ajax to send a request and get an response my browser got hanged.. and show no loading etc...

But when i response is retrieved from the Ajax then browser and page again start working...

Below is the code that i used.....

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);
            }
        });
    }

Please help me on this... i want to get the same response as on other websites when you send a request and they are using ajax the page neither hanged and also each processing like scrolling etc is visible ......

So please suggest me good ideas.... so i can get rid of it and make my ajax smooth for page without effecting and irritate the other person by hanged...

Thanks in advance...:)

Answer 1

The problem is async:false... Since your ajax request is synchronous the script execution will wait for the request to complete to continue..

Since browser uses a single threaded execution pattern(either it will execute script or repaint or wait for user events at a time- not all at the same time), your browser tab will stop listening to user(so it will look like it is hanged)

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().