无限滚动加载(第一次请求完成后才发第二次请求)

			
			
var time1;
var srcollOld = 0,srcollNow = 0,scrollFun = false;
$(window).scroll(function () {
   //$(window).scrollTop()这个方法是当前滚动条滚动的距离
   //$(window).height()获取当前窗体的高度
   //$(document).height()获取当前文档的高度

    var bot = 50;  //bot是底部距离的高度
    if ((bot  +  $(window).scrollTop() )  >=  ($(document).height() - $(window).height())) {
          srcollNow = $(window).scrollTop();
          if(srcollNow >= srcollOld){
              if(!scrollFun){
              //第一次请求完成后才发第二次请求
                  scrollFun = true;
                  clearTimeout(time1);
                  time1=window.setTimeout(function(){
                      loadAjax()
                  },500);
              }
          }
          srcollOld = srcollNow;
      }
});

function loadAjax(){
    $.ajax({
        url: url,
        type: type,
        success:function (data) {
            scrollFun = false;
            if (data.success == true) {
            }else{
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            scrollFun = false;
        }
    });
}

  --------------------------------------------------------------------------------------------------------------------------------------------------------

                var pageNum = 5;
		       var listHeight = $(".house-list").height();
				var scrollFun = false;
				var time1;
				//获取购买数据
				function getBuyData(releaseType, pageSize) {
					$.ajax({
						url: apis + "wap/house/page/filter?releaseType=" + releaseType + "&pageSize=" + pageSize,
						type: "GET",
						dataType: "json",
						success: function(data) {
							scrollFun = false;
							console.log(data);
							if(data.code == "000000") {
								var buyData = data.data
								console.log(buyData)
								var html = "";
								for(var i of buyData) {
									console.log(i)
									html += `<li>
						<a href="buyDetails.html?id=${i.id}">
						<img src="img/sell-bg.jpg" alt="" class="pic-box">
						<div class="house_detailed clearfloat">
							<div class="detailed_lf">
								<p>${"$"+countSum(i.price)}</p>
							</div>
							<div class="detailed_rt">
								<div class="dobedes">
									<p><em class="emorg1"></em>455sqft</p>
									<p><em class="emorg2"></em>4bd </p>
									<p><em class="emorg3"></em>4ba</p>
								</div>
								<span>${i.street}</span>
							</div>
						</div>
						</a>
					</li>`;
								}
								$(".house-list").html(html);
							}
						},
						error: function(data) {
							scrollFun = false;
						}
					}).then(function() {
						//获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)  
						$(window).scroll(function() {
						var scrollHeight = ($(".house-list").children().length - 4) * $(".house-list li").height() - $(".search-box").height()
							console.log($(document).scrollTop() >= scrollHeight);
							if($(document).scrollTop() >= scrollHeight) {
								if(!scrollFun) {
									//第一次请求完成后才发第二次请求
									scrollFun = true;
									clearTimeout(time1);
									time1 = window.setTimeout(function() {
										console.log(6565665)
										pageNum += 5
										console.log(pageNum)
										getBuyData(2, pageNum);
									}, 500);
								}
							}
						});
					})
				}
                getBuyData(2, pageNum);

  

posted @ 2018-09-12 09:59  慕城蓝就  阅读(510)  评论(0编辑  收藏  举报