jQuery Ajax async=>false異步改成同步時，致使瀏覽器假死的處理方法

今天作一個需求遇到了這麼個狀況，就是用戶我的中心有個功能，點擊按鈕，能夠刷新用戶當前的積分，這個確定須要使用到ajax的同步請求了，當時喀喀喀三下五除二寫玩了，大概代碼以下：

/**
     * 異步當前用戶積分 by zgw 20161216
     * @return {[type]} [description]
    */
    function flushIntegralSum() {
　　　　　//點擊按鈕刷新前修改按鈕的文案，已經去掉點擊事情，防止屢次點擊
        $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" id="flushbutton">正在刷新</a>');
        $.ajax({
           url:'URL',
           type:'post',
           async:false,
           // data:{},
           success:function(json){
               json = eval('('+json+')');
               if(json.url){window.location.href=json.url;return;}
               $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" onclick="flushFreeSum();" id="flushbutton">刷新積分</a>');
               if(json.code!=1){
                   alert(json.msg);
               }else{
                   $("#free_sum").html(json.free_sum);
               }
               return;
            }
        });
    }

本覺得這麼簡單的功能喀喀喀隨便寫寫就沒事了，在運行的時候出現了問題，當用戶點擊刷新積分按鈕時，文案沒有修改成"正在刷新",可是ajax請求發送了，因而我查看網頁代碼，發現js其實把文案和html元素綁定的onclick事件去掉了，在請求成功後有變回原來的了，可是頁面上邊文案沒有改變，當時很奇怪，不知道爲何html代碼裏邊改變了，頁面卻沒有變點變化

2、瞭解問題緣由

　　問題的根源：當時我進行了排查，最後發現是 "async:false" 的問題，換成異步的就沒有問題了，那爲何同步請求會產生代碼失效的問題呢？

　　緣由：瀏覽器的渲染(UI)線程和js線程是互斥的，在執行js耗時操做時，頁面渲染會被阻塞掉。當咱們執行異步ajax的時候沒有問題，但當設置爲同步請求時，其餘的動做（ajax函數後面的代碼，還有渲染線程）都會中止下來。即便個人DOM操做語句是在發起請求的前一句，這個同步請求也會「迅速」將UI線程阻塞，不給它執行的時間。這就是代碼失效的緣由。

3、解決問題

　　1.我當時使用了 setTimeout 來解決，把ajax代碼放在sestTimeout中，讓瀏覽器重啓一個線程來操做，這樣就解決問題了，代碼以下：

function flushIntegralSum() {
　　　　　//點擊按鈕刷新前修改按鈕的文案，已經去掉點擊事情，防止屢次點擊
        $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" id="flushbutton">正在刷新</a>');
        setTimeout(function(){
            $.ajax({
                url:'URL',
                type:'post',
                async:false,
                // data:{},
                success:function(json){
                    json = eval('('+json+')');
                    if(json.url){window.location.href=json.url;return;}
                    $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" onclick="flushFreeSum();" id="flushbutton">刷新積分</a>');
                    if(json.code!=1){
                      alert(json.msg);
                    }else{
                      $("#free_sum").html(json.free_sum);
                    }
                    return;
                }
            });
        },0) 
    }

setTimeout的第二個參數設爲0，瀏覽器會在一個已設的最小時間後執行

　　到這裏問題就解決了，可是你能夠試試當你點擊按鈕的時候若是須要彈出一個gif圖片，而且圖片一直在旋轉，提示更新中，你會發現圖片雖然會顯示，可是圖片倒是不動的，那是由於雖然同步請求延遲執行了，可是它執行期間仍是會把UI線程給阻塞。這個阻塞至關牛逼，連gif圖片都不動了，看起來像一張靜態圖片同樣。結論很明顯，setTimeout治標不治本，至關於把同步請求「稍稍」異步了一下，接下來仍是會進入同步的噩夢，阻塞線程，這種方法只適合發請求以前操做簡單的時間短的狀況

2.使用 Deferred 來解決

jQuery在1.5版本以後，引入了Deferred對象，提供的很方便的廣義異步機制。

function getData3(){        var defer = $.Deferred();
        $.ajax({
            url : 'p.php',            //async : false,
            success: function(data){
                defer.resolve(data)
            }
        });        return defer.promise();
}    
$('.btn3').click(function(){
        $('.loadingicon').show();
        $.when(getData3()).done(function(data){
            $('.loadingicon').hide();
            alert(data);
        });
});

能夠看到我在ajax請求中去掉了async:false，也就是說，這個請求又是異步的了。另外請注意success函數中的這一句：defer.resolve(data)，Deferred對象的resolve方法可傳入一個參數，任意類型。這個參數能夠在done方法中拿到，因此咱們異步請求來的數據就能夠以這樣的方式來返回了。

　　至此，問題獲得瞭解決。Deferred對象如此強大且方便，咱們能夠好好利用它。

<button class="btn1">async:false</button><button class="btn2">setTimeout</button><button class="btn3">deferred</button>
    <img class="loadingicon" style="position:fixed;left:50%;top:50%;margin-left:-16px;margin-top:-16px;display:none;" src="loading2.gif" alt="正在加載" /><script>
    function getData1(){        var result;
        $.ajax({
            url : 'p.php',
            async : false,
            success: function(data){
                result = data;
            }
        });        return result;
    }
    $('.btn1').click(function(){
        $('.loadingicon').show();        var data = getData1();
        $('.loadingicon').hide();
        alert(data);
    });
    
    $('.btn2').click(function(){
        $('.loadingicon').show();
        setTimeout(function(){
            $.ajax({
                url : 'p.php',
                async : false,
                success: function(data){
                    $('.loadingicon').hide();
                    alert(data);
                }
            });
        }, 0);
    });    function getData3(){        var defer = $.Deferred();
        $.ajax({
            url : 'p.php',            //async : false,            success: function(data){
                defer.resolve(data)
            }
        });        return defer.promise();
    }    
    $('.btn3').click(function(){
        $('.loadingicon').show();
        $.when(getData3()).done(function(data){
            $('.loadingicon').hide();
            alert(data);
        });
    });</script>

所有代碼