ajax 多個setInterval進行ajax請求的頁面長時間打開會出現頁面卡死問題

 多個setInterval進行ajax請求的頁面長時間打開會出現頁面卡死問題

 

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

方案一：

setInterval會消耗網頁內存，如果不清理會一直消耗直到網頁卡死。

解決辦法：

先清除定時器再創建一個定時器

clearInterval(t);

t=setInterval(ajax,10000);

方案二：（等價於同步）

使用JQuery Deferred對象。
var getWordCount = function(。。。){
        var defer = $.Deferred();
        var urlStr = "postcommit.html?I_SOURCE=getxliff";
        $.ajax({
            url : urlStr,             //async : false,表示異步執行。
            success: function(dataStr){
                      defer.resolve(dataStr);
            }
        });        
        return defer.promise();
   }

var myTotalprice = function(。。。){
                           //當getWordCount() 執行完成后，執行done()以下操作。就跟同步效果一樣。
                          $.when(getWordCount(。。。)).done(function(dataStr){
                                       alert(dataStr);
                           });                   
   }

方案三：

參考地址：https://www.jianshu.com/p/55448bc08961

使用web worker：

var worker = new Worker('worker.js');//必須是同域的

worker.postMessage(msg);//主頁面向worker發消息。msg可以是對象，字符串之類。

onmessage = function(evt) {// 處理主頁面發來的消息
    postMessage('reveive data ' + evt.data + 'from page');// 向主頁面發消息
}

worker.terminate();

方案四：

長連接方式實現：xmlhttp池