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池