解决在滚动使用Ajax进行加载的时候，当新的内容还没有出来，内容的高度还没有发生变化，手抖又一次滚动，就会造成发起多次Ajax请求
html代码结构
<ul>
<!--每次请求进来新的内容就生成li放在ul里边，ul的高度会发生变化-->
</ul>
javascript代码
//1.判断加载时机
//当 滚动条向上滚动的距离+屏幕的高度 >= ul距离文档顶部的距离+ul本身的高度 的时候就能进行加载
var windowH = $(window).height(),//屏幕的高度
offsetTop = $('ul').offset().top;//ul距离文档顶部的距离
function recommend() {
var page = 0; var html;
//初始化发送请求渲染首屏数据
ajax("./api/recommend.php", 'page=0', function (data) {
html = ejs.render($("#recommend").html(), { data: data.data });
$(".recommend .cont ul").html(html);
})
var flag = true;//设置一个开关
window.addEventListener("scroll", function () {
//当页面向下拉的时候出现懒加载
var scrollTop = $(window).scrollTop();//滚动条向上滚动的距离
var height = $(".recommend .cont").height();;//ul本身的高度
if (scrollTop + windowH >= offsetTop + height) {
if (flag) {
flag = false;//只要进来就把开关关上，以防新的内容还没有渲染就再次发起Ajax请求
page++;
if (page == 5) {//到五页就不再加载
$(".recommend .cont .loading img").hide().siblings().css("display","block");
return;
}
ajax("./api/recommend.php", 'page=' + page, function (data) {
html += ejs.render($("#recommend").html(), { data: data.data });
$(".recommend .cont ul").html(html);
flag = true;//只有当把新的内容渲染成功，内容的高度发生变化了才把开关打开；
})
}
}
}, false)
}
recommend();
