需求是定时刷新界面,实现方式为增加定时器,定时调用Ajax获取数据来刷新界面。
window.clearInterval(timeid);
var timeid=self.setinterval("clock()",1000);
function clock(){
$.ajax({
type: "post",
url: "${ctx}/task/list?ss="+Math.random(),
async : true,
dataType:"html",//返回整个HTML
success: function (data) {
cache:false,
$("#box").empty();
$("#box").append($(data).find("#box"));//刷新整个box页面的html
}
})
}
运行没问题,但是一旦时间久了会出现页面卡顿,甚至浏览器崩溃的现象。
这个地方有两个坑:
1.setinterval为定时触发,不管上一个请求有没有完成都会继续发起下一个请求,导致cpu占用过高。
2.虽然设置了不需要缓存,但是每次请求都会建立一个新的xmlhttprequest,而且jquery不会自动回收资源,导致内存占用,浏览器崩溃。
解决方法:
window.clearInterval(timeid);
var timeid=self.setTimeout("clock()",1000);
function clock(){
$.ajax({
type: "post",
url: "${ctx}/task/list?ss="+Math.random(),
async : true,
dataType:"html",//返回整个HTML
success: function (data) {
cache:false,
$("#box").empty();
$("#box").append($(data).find("#box"));//刷新整个box页面的html
},
complete: function (XHR, TS) {
XHR = null;
timeid=self.setTimeout("clock()",1000);
console.log("执行一次");
}
})
}
1.将setinterval替换为setTimeout,setTimeout为1s后执行此方法,这里我们可以控制下一次执行为上一次请求回调之后再等待1s发起下一次请求。
2.增加complete回调方法监听,并在监听中将xmlhttprequest主动回收。
网上有正确的解决方案,但是我花了一下午时间才找到。特地发文,希望大家能少走点弯路。