极客观点
研发管理
HarmonyOS
需求是做一个加载更多，tab切换到那个模块，调用相应的接口，代码如下：
loadMore.js 插件
;(function(w,$){
var loadmore = {
/*单页加载更多 通用方法
*
* @param callback 回调方法
* @param config 自定义参数
* */
get : function(callback, config){
var config = config ? config : {}; /*防止未传参数报错*/
var counter = 1; /*计数器*/
var pageStart = 1;
var pageSize = config.size ? config.size : 10;
/*默认通过点击加载更多*/
$(document).on('click', '.js-load-more', function(){
counter ++;
pageStart = counter;
callback && callback(config, pageStart, pageSize);
});
/*通过自动监听滚动事件加载更多,可选支持*/
config.isEnd = false; /*结束标志*/
config.isAjax = false; /*防止滚动过快，服务端没来得及响应造成多次请求*/
function sleep(delay) {
var start = (new Date()).getTime();
while ((new Date()).getTime() - start < delay) {
continue;
}
}
console.log(config.isAjax);
$(window).scroll(function(){
/*是否开启滚动加载*/
if(!config.scroll){
return;
}
/*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
if(config.isEnd == true || config.isAjax == true){
return;
}
/*当滚动到最底部以上100像素时， 加载新内容*/
if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
console.log(1);
config.isAjax = true;
sleep(600);
counter++;
pageStart = counter;
callback && callback(config, pageStart, pageSize);
}
});
/*第一次自动加载*/
callback && callback(config, pageStart, pageSize);
},
}
$.loadmore = loadmore;
})(window, window.jQuery || window.Zepto);业务代码：
$(".nav_bar div").click(function(){
$(".spinner").css("display","block");
$(".loadTip").css("display","none");
$(".loadTip").html("我也是有底线的 ");
$(this).addClass("active").siblings().removeClass("active");
var currentBox=$(this).attr("data-name");
var type=$(this).attr("data-type");
$("."+currentBox).show().siblings().hide();
// 权益点明细
var userId = $.getUrlParam("userId");
if(type==0){
$("#allBox").html("");
$("#srBox").html("");
$("#qyBox").html("");
$.loadmore.get(getAllData, {
scroll: true, //默认是false,是否支持滚动加载
size:10, //默认是10
flag: 1, //自定义参数，可选，示例里没有用到
isAjax:false,
isEnd:false
});
} else if(type==1){
$("#allBox").html("");
$("#srBox").html("");
$("#qyBox").html("");
$.loadmore.get(getIncomeData, {
scroll: true, //默认是false,是否支持滚动加载
size:10, //默认是10
flag: 1, //自定义参数，可选，示例里没有用到
isAjax:false,
isEnd:false
});
} else if(type==2){
$("#allBox").html("");
$("#srBox").html("");
$("#qyBox").html("");
$.loadmore.get(getExchangeData, {
scroll: true, //默认是false,是否支持滚动加载
size:10, //默认是10
flag: 1, //自定义参数，可选，示例里没有用到
isAjax:false,
isEnd:false
});
}
});```
其中一个tab下接口的调用方法，另外两个函数原理一样，代码如下
function getAllData(config,pageNum,size){
// 获取全部明细内容
var userId = $.getUrlParam("userId");
var size = config.size;
config.isAjax = true;
$.ajax({
type:"post",
url:"http://www.tojoycloud.org/appfront/m/app/prize/tjBeansDetail",
data:'{"userId":"'+userId+'","type":"0","page":"'+pageNum+'","size":"'+size+'"}',
dataType:"json",
contentType:"application/json;charset=utf-8",
success:function(data){
if(data.responseCode==1){
isClick = true;
config.isAjax = false;
var len=data.dataObj.length;
if(pageNum == 1){
if(data.dataObj.length<size){
config.isEnd = true;
$(".spinner_allBox").css("display","none");
$(".loadTip_allBox").css("display","none");
}
} else{
if(data.dataObj.length<size){
config.isEnd = true;
$(".spinner_allBox").css("display","none");
$(".loadTip_allBox").css("display","block");
$(".loadTip_allBox").html("我也是有底线的 ");
}
}
var str='';
var srStr='';
var len=data.dataObj.length;
/*$("#allBox").html("");*/
var srcOrigin = "";
for(var i=0;i<len;i++){
if(data.dataObj[i].tjBeansControl==1){
console.log(data.dataObj[i].userId)
if(data.dataObj[i].userPic){
srcOrigin = (ossUrl+data.dataObj[i].userPic)
} else {
srcOrigin = "img/user.png"
}
str+='<li><p class="srTitle">成功邀请好友认证</p><div class="srDetaile">';
str+='<img onclick="goIndexFun(this)" data-userid='+data.dataObj[i].userId+' class="userImg" src="'+srcOrigin+'"/>';
str+='<div class="srNamezw"><span class="srName">'+data.dataObj[i].userName+'</span>';
str+='<span class="srZw">'+data.dataObj[i].userPosition+'</span>';
str+='<p class="srgs">'+data.dataObj[i].company+'</p></div>';
str+='<p class="srTime">'+data.dataObj[i].createTime+'</p></div>';
str+='<div class="srNum">+'+data.dataObj[i].tjBeansNum+'</div>';
str+='</li>'
}
else if(data.dataObj[i].tjBeansControl==0 ||data.dataObj[i].tjBeansControl==2){
if(data.dataObj[i].type=="0"){
var dhType='兑换代表参会券';
}else if(data.dataObj[i].type=="1"){
var dhType='兑换嘉宾参会券';
}else if(data.dataObj[i].type=="2"){
var dhType='兑换贵宾参会券';
}else if(data.dataObj[i].type=="3"){
var dhType='兑换奖品';
}
str+='<li><div class="qyLeft">';
str+='<p>'+dhType+'</p>';
str+='<p class="qyTime">'+data.dataObj[i].createTime+'</p></div>';
str+='<div class="qyRight">-'+data.dataObj[i].tjBeansNum+'</div></li>'
} }
}
$("#allBox").append(srStr+str);
}
}
});
}
现在有个bug 就是当我在全部明细 或者其他tab上面连续快速点击多次后，拿全部明细举例，页面会加载第一页的数据，当我滚动页面时，页面会同时加载多次第二页的数据，一下子调用好多次接口，请问下这个是怎么回事？
没做防抖。scroll 是个高频事件。
参考这里