Press "Enter" to skip to content

手机端滑动分页并防抖的代码

var isLoading = false;
var isEnd = false;
var curentPage = 2;


var h5Js = function(){
return {
load: function () {
if(isLoading) {
return;
}
$.ajax({
type:"GET",
url:ApiUrl + "/index.php?act=index&op=indexpg",
dataType:"json",
data:{curpage : curentPage},
contentType:"application/json",
beforeSend:function(){
isLoading = true;
$("#loading").html("加载中...");

},
success:function (resp){
if(resp.code == 200){
var data = resp.datas;
if(data.isLastPage == 1){
isEnd = true;
$("#loading").text(" -- 到底了 --");
} else {
curentPage++;
$("#loading").html("上滑查看更多");
}
var html_goods = '';
var goods_list = data.goods_list;
$.each(goods_list, function (i, item){
let htmlitem = '<a class="goods-itemg" href="tmpl/product_detail.html?goods_id='+item.goods_id+'">' +
'<div class="googs-item-l">' +
'<img src="'+item.goods_image_url +'">'+
'</div>\n' +
'<div class="goods-item-r">\n' +
'<div class="goods-i-title">'+item.goods_name+'</div>\n' +
'<div class="goods-i-price">\n' +
'<div class="goods-i-p-l">原价¥'+item.goods_marketprice+'</div>\n' +
'<div class="goods-i-p-r">1人购买</div>\n' +
'</div>\n' +
'<div class="goods-i-buy">\n' +
'<div class="goods-i-buy-l">¥'+item.goods_price+'</div>\n' +
'<div class="goods-i-buy-r">购买</div>\n' +
'</div>\n' +
'</div>\n' +
'</a>';
html_goods += htmlitem
});
$("#goods-list").append(html_goods);
}else{
//error
}
},
error: function(XMLHttpRequest, textStatus, errorThrown){
isLoading = false;
$("#loading").html("加载失败...");
},
complate:function(){
isLoading = false;
}
});
}
}
}();


//执行频率太高 比如需要动一下就要判断执行某动画~~
function scrollHandle(){
var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
var clientHeight = document.documentElement.clientHeight;
if($("body").height() - scrollTop - clientHeight <= 0) {
h5Js.load();
}
}

function debounce(fn, delay){
var timer = null;
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn, delay)
}
}

window.onscroll = debounce(scrollHandle, 200)
发表评论