这是一个创建于 3312 天前的主题，其中的信息可能已经有所发展或是发生改变。
我想做一个拉到最后就继续加载更多的效果,和 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 。
第 1 条附言 · 2015-10-22 11:15:27 +08:00
已经解决了，这里写上出问题的地方，供参考
问题出在 append 的时候的选择器上，先前的选择器有错误 使用的是 $('#list_table tbody')
也就是一个 table 下面的所有 tbody 元素，都会被 append
然后我的代码里 table 下面还有个 table ， table 下面还有个 tbody ，这样多层的嵌套 append 之后就内存溢出了
现在选择器改成了 $('#list_table > tbody:nth-child(2)')
这个出错方式太逗了
3 条回复 • 2015-10-23 09:39:08 +08:00
 |
1
shiye515 2015-10-21 23:44:43 +08:00  1
每次滚动页面都会执行$(document).height() 许多次，然而$(document).height()这句代码会触发浏览器重绘。滚动的回调函数实时性要求不高可以这么写（滚动结束 100 毫秒后执行一次回调）
var timer=-1; $(window).scroll(function(){ clearTimeout(timer); timer = setTimeout(function(){ // 这里写实际的逻辑代码 },100); }); |
 |
2
LeoQ OP @shiye515 恐怕你说的不能解决我的问题,我把 ajax 请求直接去掉了,只写了一个``console.log``然后就在底部滚来滚去，但是内存不会涨
后来我用了一个 jquery 的 visible 插件来检测 footer 是不是在界面内,规避``$(document).height()``这个方法 但是还是有内存暴涨的情况,我觉得问题应该是在 ajax 请求上。 请问一下有什么方法可以查看这个内存被哪个函数消耗掉了吗？ 谢谢你的帮助！ |
|
3
shiye515 2015-10-23 09:39:08 +08:00
chrome 的开发者工具
|
Select Language