zoukankan      html  css  js  c++  java
  • 无限滚动加载(第一次请求完成后才发第二次请求)

    			
    			
    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);
    

      

  • 相关阅读:
    C# QRCode、DataMatrix和其他条形码的生成和解码软件
    windows系统 安装MongoDB 32位
    ubuntu下创建c语言程序之hello world
    ueditor 添加微软雅黑字体 异常“从客户端中检测到有潜在危险的 request.form值”,解决
    asp.net ueditor 图片上传路径问题解决
    C# winform线程的使用 制作提醒休息小程序(长时间计算机工作者必备)
    jquery.qrcode和jqprint的联合使用,实现html生成二维码并打印(中文也ok)
    javascript陷阱之in语句
    谈谈Python的深拷贝和浅拷贝
    Flask开启多线程、多进程
  • 原文地址:https://www.cnblogs.com/lan-cheng/p/9633069.html
Copyright © 2011-2022 走看看