jquery ajax 请求内存溢出

我想做一个拉到最后就继续加载更多的效果,和 twitter 和 facebook 查不多的那种

$(window).scroll(function(){
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 60){
  if (is_loading == 0){
    console.log("bottom of the page reached!");
    is_loading = 1;
    var page = current_page+1;
    var url = "?page="+page
  console.log(url)
  $.ajax({
    url : url,
    success: function(data){
      current_page = page;
      $('#list_table tbody').append(data['html']);
      is_loading = 0;
      delete data;
    },
  });
  $('#loading').css("display","block");
  }
  //loaded[pages[current+1]] = loaded[pages[current+1]] + 1;

  //      if(loaded[pages[current+1]] <= 1)
  //           loadMoreContent(current+1);
}

上面的是 js 代码，思路就是在滚到下面的时候设置is_loading为 1
然后做 ajax 请求，请求成功后把 HTML append 到相应元素
但是万万没想到会溢出， firefox 和 chrome 的最新版上都有内存溢出的现象，翻了两三页之后就会卡的不行，最后就崩了。
谷歌百度之后说问题在 jquery 没有垃圾回收的机制
有个解决方案是在完成这次 ajax 后把某个变量设成 null
http://www.jb51.net/article/30458.htm
就是加上一个complete: function (XHR, TS) { XHR = null }
但是对我来说还是没有改观

后端的问题基本是排除，在服务端的日志是翻几页就做了几次请求，每次的请求都是正常的 200

搜了半天也没有很好的解决方案，求指导，能做到那种拉到底部加载更多就 OK 。

shiye515

2015-10-21 23:44:43 +08:00

每次滚动页面都会执行$(document).height()　许多次，然而$(document).height()这句代码会触发浏览器重绘。滚动的回调函数实时性要求不高可以这么写（滚动结束 100 毫秒后执行一次回调）
var timer=-1;
$(window).scroll(function(){
clearTimeout(timer);
timer = setTimeout(function(){
// 这里写实际的逻辑代码
},100);
});

LeoQ

2015-10-22 10:14:14 +08:00

@shiye515 恐怕你说的不能解决我的问题,我把 ajax 请求直接去掉了,只写了一个``console.log``然后就在底部滚来滚去，但是内存不会涨
后来我用了一个 jquery 的 visible 插件来检测 footer 是不是在界面内,规避``$(document).height()``这个方法
但是还是有内存暴涨的情况,我觉得问题应该是在 ajax 请求上。

请问一下有什么方法可以查看这个内存被哪个函数消耗掉了吗？

谢谢你的帮助！