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

待我称王封你为后i 2022-01-07 17:35 252阅读 0赞

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

转载于:https://www.cnblogs.com/lan-cheng/p/9633069.html

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关 ueditor第一次加载成功,第二次加载失败的问题

打开页面的时候先删除原有的初始化对象,然后在进行初始化渲染 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH...

缺乏、安全感/ 2024年04月20日 00:43/ 0 赞/ 76 阅读

相关 axios，二次请求的时候，取消第一次发出的请求

let pending = \[\] //声明一个数组用于存储每个ajax请求的取消函数和ajax标识 let cancelToken = axios.CancelToken

川长思鸟来/ 2023年08月17日 17:15/ 0 赞/ 126 阅读

相关 feign 服务启动后加载避免第一次调用超时及第一次调用耗时长

版本：feign-core 9.5.0 spring-cloud-starter-openfein 1.4.6 第一次调用耗时的原因-懒加载：1、spring mvc s

Bertha 。/ 2023年07月09日 02:01/ 0 赞/ 16 阅读

相关 layui的layer第一次加载为空白页面，第二次打开才能正常显示内容

在页面设置了一个点击事件，点击后弹出layer窗口 ![20201015173526126.png][] ![watermark_type_ZmFuZ3poZW5naGVp

太过爱你忘了你带给我的痛/ 2022年12月15日 06:10/ 0 赞/ 468 阅读

相关解决Feign第一次请求timeout问题

java.util.concurrent.TimeoutException: null at com.netflix.hystrix.AbstractC

柔光的暖阳◎/ 2022年06月16日 12:45/ 0 赞/ 235 阅读

相关 SpringMVC、Tomcat怎样完成一次Http请求的？

引言 Tomcat和SpringMVC的职责 Tomcat和Servlet的工作原理 Tomcat下Servlet的配置文

喜欢ヅ旅行/ 2022年06月10日 09:57/ 0 赞/ 173 阅读

相关 SpringCloud-Feign 第一次请求timeout问题

java.util.concurrent.TimeoutException: null at com.netflix.hystrix.AbstractC

Myth丶恋晨/ 2022年05月26日 22:28/ 0 赞/ 192 阅读

相关无限滚动加载（第一次请求完成后才发第二次请求）

var time1; var srcollOld = 0,srcollNow = 0,scrollFun = false; $(window).scro

待我称王封你为后i/ 2022年01月07日 17:35/ 0 赞/ 253 阅读

相关第二次机房重构--UI加载

自己重构机房收费系统差不多快两个月了，之前因为自考和作品展等一些事情将这方面的事情一直耽搁着，没有怎么进行，现在那些事情基本上都已经完事了，然后拿起这件事情，用VS

短命女/ 2021年09月26日 15:40/ 0 赞/ 274 阅读

相关 springmvc的controller中有些代码只在项目启动后接到第一次请求才执行

一、需求说明现在项目中有个页面加载方法，需要在查询后执行插入，但是插入数据的部分只会在Web项目启动后第一次请求才会执行代码如下： @Controller

偏执的太偏执、/ 2021年09月24日 18:44/ 0 赞/ 120 阅读