0
点赞
收藏
分享

微信扫一扫

下拉加载更多+防止多次触发

需要在聊天互动展示列表展示,滑动到最下面,重新请求加载数据

下拉加载更多+防止多次触发_jQuery

 

 

利用 滚动的位置+滚动的距离 - (自定义的偏移量)》=元素盒子的高度 来计算是否元素内部滚动到了底部:nScrollTop + nDivHight> nScrollHight
因为1px 也是超出,有可能造成多次请求,所以要进行一下定时器延迟执行

$('.scroll_box').scroll(function () {
var type=$(this).attr('data-type');
var obj=$('.chat');
switch (type) {
case 'chat':

break;
case 'question':
obj=$('.que_r')
break;
case 'online':
obj=$('.online_lists')
break;
default:
break
}
var nDivHight = obj.height();//元素的固定高度
var nScrollHight = $(this)[0].scrollHeight;//滚动距离总长
var nScrollTop = $(this)[0].scrollTop;//滚动到的当前位置
//40是偏差大小
if(nScrollTop + nDivHight-40> nScrollHight){
getLoadMore()
}
});

var loadMore=(type)=>{
//ajax掉数据
console.log('获取数据')
}
//防止多次触发
var debounce=(func,wait=1000)=>{
var timeout;
//利用定时器 执行回调函数
return function(event){
clearTimeout(timeout);
timeout=setTimeout(()=>{
func(event)
},wait)
}
}
var getLoadMore=debounce(loadMore)

  


举报

相关推荐

0 条评论