当前位置:Gxlcms > PHP教程 > 滚动分页的代码,会多次请求页码,导致数据重复,经过本人测试,是以下代码的有关问题,但没有找到解决办法,求解决

滚动分页的代码,会多次请求页码,导致数据重复,经过本人测试,是以下代码的有关问题,但没有找到解决办法,求解决

时间:2021-07-01 10:21:17 帮助过:15人阅读

滚动分页的代码,会多次请求页码,导致数据重复,经过本人测试,是以下代码的问题,但没有找到解决方法,求解决
var page=1;
var setFixed=function(){
var t=$(document).scrollTop(); //卷上去的高度
var wh=$(window).height();//窗口的高度
var h=$(document).height();//网页窗口的高度
var data={};
var cateid=$("#cateid").val();
if(page>0){
$("#load").show();
//a=document.body.scrollHeight;
//b=$(window).scrollTop();
//c=$(window).height();
//if(c==(a-b) || page ==1){
if(t+wh>=h-50){
$.post(app.config.site+"/Game/getGame",{cateid:cateid,page:page},function(data){
$("#load").hide();
if(data.status==1){
//e.preventDefault();
$(".list_class").html($(".list_class").html()+data.info);
//$(".list_class").html(data.info);//覆盖页码
page++;
}else{
page=0;
}

},'json');

}
}
};
setFixed(page);
window.onscroll=setFixed;
});
});
------解决思路----------------------
设定一个 isajaxsend=false 的变量(只用于判断是否有滚动分页请求正在执行也可以)
  1. <br>var isajaxsend=false;<br>var page=1;<br>var setFixed=function(){<br>
  2. var t=$(document).scrollTop(); //卷上去的高度<br>
  3. var wh=$(window).height();//窗口的高度<br>
  4. var h=$(document).height();//网页窗口的高度<br>
  5. var data={};<br>
  6. var cateid=$("#cateid").val();<br>
  7. if(page>0){<br>
  8. $("#load").show();<br>
  9. //a=document.body.scrollHeight;<br>
  10. //b=$(window).scrollTop();<br>
  11. //c=$(window).height();<br>
  12. //if(c==(a-b) <br><font color="#FF8000">------解决思路----------------------</font><br> page ==1){<br>
  13. if(t+wh>=h-50){<br>
  14. if (isajaxsend) {//判断是否有滚动分页正在请求,若有则不请求<br>
  15. return false;<br>
  16. }<br>
  17. isajaxsend = true;//标识正在请求分页内容<br>
  18. $.post(app.config.site+"/Game/getGame",{cateid:cateid,page:page},function(data){<br>
  19. $("#load").hide();<br>
  20. if(data.status==1){<br>
  21. //e.preventDefault();
  22. <br>
  23. $(".list_class").html($(".list_class").html()+data.info);<br>
  24. //$(".list_class").html(data.info);//覆盖页码<br>
  25. page++;<br>
  26. }else{<br>
  27. page=0;<br>
  28. }<br>
  29. isajaxsend = false;//不论成功与否,都标识为没有请求<br>
  30. },'json');<br>
  31. }<br>
  32. }<br>};<br>

人气教程排行