一、問題的起因

　　今天做一個需求遇到了這麼個情況，就是使用者個人中心有個功能，點選按鈕，可以重新整理使用者當前的積分，這個肯定需要使用到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程式碼裡邊改變了，頁面卻沒有變點變化

二、瞭解問題原因

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

　　原因：瀏覽器的渲染(UI)執行緒和js執行緒是互斥的，在執行js耗時操作時，頁面渲染會被阻塞掉。當我們執行非同步ajax的時候沒有問題，但當設定為同步請求時，其他的動作（ajax函式後面的程式碼，還有渲染執行緒）都會停止下來。即使我的DOM操作語句是在發起請求的前一句，這個同步請求也會“迅速”將UI執行緒阻塞，不給它執行的時間

三、解決問題

　　1.我當時使用了setTimeout 來解決，把ajax程式碼放在sestTimeout中，讓瀏覽器重啟一個執行緒來操作，這樣就解決問題了，程式碼如下：

　　function flushIntegralSum() {
　　　　　//點選按鈕重新整理前修改按鈕的文案，已經去掉點選事情，防止多次點選
        $("#flushbutton").replaceWith('<a  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  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 來解決

內容出自：http://www.cnblogs.com/panmy/p/5651732.html