jq和js实现滚动加载

首先纪律性的定义page和isLoading

var page = 0;
var isLoading = false;
// 获取商家列表
function getList(){
  page++;
  isLoading = true;
  $.getJSON("../json/homelist.json", 
     (data, textStatus, jqXHR) => {
      console.log("我是商家列表数据组a",data);
      var list = data.data.poilist || [];
      initContentList(list);
      isLoading = false;      
    }
  );
}

在函数开始加载的时候page++，同时转换isLoading，在AJAX载入完成后调转isLoading

function addEvent(){
  window.addEventListener('scroll', ()=>{
    var clientHeight = document.documentElement.clientHeight;
    var scrollHeight = document.body.scrollHeight;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var prodis = 30;
    if(clientHeight+scrollTop >= (scrollHeight-30)){
      //最多滚动三页
      if(page<3){
        //在ajax请求时避免多次加载
        if(isLoading){
          return;
        }
        getList();
      }
    }
  })
}

prodis是额外的缓冲距离，免得直接看到底部