js实现无限下拉效果+判断当前可视窗口切换url

我这个功能点是：文章页面用户下拉到底部之后，再重新往后面显示一篇文章，并且修改当前可视窗口（也就是当前页面文章的url）让用户看到更多的文章~

let data = []; //存放每次的新数据
var curPage = 0; //当前页数

let newUrl; //存放当前可视窗口的url
let prevY = 0; //判断最后一次下拉的总长度
var request_url = ''; //请求的json地址
let orginal_url = window.location.pathname; //记录初始地址
//存儲json数据
var new_article_content;


//请求第一次数据
$.ajax({
	// url: './js/article_one.json',
	url: request_url + 1 + '.json',
	async: false,
	dataType: 'json',
	success: function(json) {
		new_article_content = json;
	},
	error() {
		new_article_content = [];
	}
});

$(function() {
	addData(curPage);
});

判断是否需要重新拉取数据

var poll = document.getElementById("poll");
	if (window.scrollY > prevY) { // 判断用户是否向下滚动
		prevY = window.scrollY
		if (poll.getBoundingClientRect().top <= window.innerHeight) {
			// 请求新的数据

			curPage++;
			addData(curPage);
			setTimeout(function() {
				createTableBody();
			}, 300)
		}
	}

判断当前可视窗口 切换url

    var scrollTop = $(document).scrollTop()
	var lines = $('.component-infinite-scroll')
	let index = 0;
	for (let i = 0; i < lines.length; i++) {
		var tops = $(lines[i]).offset().top // 循环出每个盒子到顶部的距离 
		var line_height = $('.component-infinite-scroll').eq(i).outerHeight() // 循环出每个盒子的高度
		/*如果当前滚动的距离大于或者等于当前盒子到达顶部的距离 且
		 *小于当前盒子到达顶部距离 与 当前盒子高度的和 
		 *那么当前盒子就处于可视范围内
		 * */
		if (scrollTop >= tops && screenTop < (tops + line_height)) {
			index++;
			// $('.component-infinite-scroll').eq(i).css("background-color", "yellow")
		} else {
			// $('.component-infinite-scroll').eq(i).css("background-color", "transparent")
		}
	}
	if (index - 2 != -1) {
		let newUrl = new_article_content[index - 2].article_mes.art_url;
		history.pushState('', '', newUrl); // 不刷新页面更新url
	} else if (index = 1) { 
		history.pushState('', '', orginal_url); 
	}

增加数据，做个防抖效果

function addData(curPage) {
	const getData = debounce(scrollAndLoading, 500)
	window.addEventListener('scroll', getData, false)
	return () => {
		window.removeEventListener('scroll', getData, false)
	}
}

// 防抖函数(进入函数则清除定时器，重新创建一个定时器，然后把定时器id设置为fn，做缓存，
// 等到用户事件不触发，500毫秒以后执行事件，并通过call修改执行this指向)
function debounce(fn, time) {
	return function(args) {
		let that = this
		clearTimeout(fn.tid)
		fn.tid = setTimeout(() => {
			fn.call(that, args)
		}, time);
	}
}

完整代码：

let data = []; //存放每次的新数据
var curPage = 0; //当前页数
var jsonpage = 0;
let newUrl; //存放当前可视窗口的url
let prevY = 0; //判断最后一次下拉的总长度
var request_url = ''; //请求的json地址
let orginal_url = window.location.pathname; //记录初始地址
var new_article_content; //存儲json数据

$.ajax({
	// url: './js/article_one.json',
	url: request_url + 1 + '.json',
	async: false,
	dataType: 'json',
	success: function(json) {
		new_article_content = json;
	},
	error() {
		new_article_content = [];
	}
});

$(function() {
	addData(curPage);
});


function scrollAndLoading() {

	var scrollTop = $(document).scrollTop()
	var lines = $('.component-infinite-scroll')
	let index = 0;
	for (let i = 0; i < lines.length; i++) {
		var tops = $(lines[i]).offset().top // 循环出每个盒子到顶部的距离 
		var line_height = $('.component-infinite-scroll').eq(i).outerHeight() // 循环出每个盒子的高度
		/*如果当前滚动的距离大于或者等于当前盒子到达顶部的距离 且
		 *小于当前盒子到达顶部距离 与 当前盒子高度的和 
		 *那么当前盒子就处于可视范围内
		 * */
		if (scrollTop >= tops && screenTop < (tops + line_height)) {
			index++;
			// $('.component-infinite-scroll').eq(i).css("background-color", "yellow")
		} else {
			// $('.component-infinite-scroll').eq(i).css("background-color", "transparent")
		}
	}
	if (index - 2 != -1) {
		let newUrl = new_article_content[index - 2].article_mes.art_url;
		history.pushState('', '', newUrl); // 不刷新页面
	} else if (index = 1) {
		history.pushState('', '', orginal_url);
	}

	var poll = document.getElementById("poll");
	if (window.scrollY > prevY) { // 判断用户是否向下滚动
		prevY = window.scrollY
		if (poll.getBoundingClientRect().top <= window.innerHeight) {
			// 请求新的数据

			curPage++;
			addData(curPage);
			setTimeout(function() {
				createTableBody();
			}, 300)
		}
	}
};

function createTableBody() {

	function create_new_article() {
		//创建一个新的article
	}

	//请求新的artical信息
	let request_article_mes = new_article_content[curPage - 1];

	if (request_article_mes != null) {
		$(".component-infinite-container")[0].append(create_new_article());
	}
}

function addData(curPage) {
	const getData = debounce(scrollAndLoading, 500)
	window.addEventListener('scroll', getData, false)
	return () => {
		window.removeEventListener('scroll', getData, false)
	}
}

// 防抖函数(进入函数则清除定时器，重新创建一个定时器，然后把定时器id设置为fn，做缓存，
// 等到用户事件不触发，500毫秒以后执行事件，并通过call修改执行this指向)
function debounce(fn, time) {
	return function(args) {
		let that = this
		clearTimeout(fn.tid)
		fn.tid = setTimeout(() => {
			fn.call(that, args)
		}, time);
	}
}