一次性处理100000条数据思路（自己总结）

小杨小杨、努力变强！

已于 2022-06-29 16:57:09 修改

阅读量298

点赞数

CC 4.0 BY-SA版权

分类专栏： web前段文章标签：前端

于 2022-06-29 16:53:21 首次发布

本文链接：https://blog.csdn.net/qq_42717015/article/details/125525331

web前段专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种利用监听防抖技术实现在滚动到底部时加载更多内容的分页方法。通过监听滚动事件并应用防抖策略，优化了页面性能。当滚动到底部时，动态添加新的内容行，实现了无限滚动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有不对的希望大家多多指教，哈哈哈

思路：

采用监听防抖监听拉条的位置+自己实现分页的思路来实现的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="one" id="more"></div>
		<script src="jquery-1.12.2.js"></script>
		<script>
			let page=1,limit=200,list=100000;
			$(function(){
				add()
			})
			window.onscroll = debounce(showTop,300) 
			function debounce(fn,delay){
			    let timer = null //借助闭包
			    return function() {
			        if(timer){
			            clearTimeout(timer) 
			        }
			        timer = setTimeout(fn,delay) // 简化写法
			    }
			}
			function showTop() {
			    // 变量 scrollHeight 是滚动条的总高度
			    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
			    // 变量 windowHeight 是可视区的高度
			    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
			    // 变量scrollTop为当前页面的滚动条纵坐标位置
			    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
			    // 滚动条到底部得距离 = 滚动条的总高度 - 可视区的高度 - 当前页面的滚动条纵坐标位置
			    var scrollBottom = scrollHeight - windowHeight - scrollTop
			    console.log(scrollBottom,'scrollBottom')   
				if(scrollBottom==0){
					page+=1;
					add()
				}		
			}
			function add(){
				console.log(page) 
				let num=(page-1)*200
				for (let i = num; i < page*limit; i++) {
					$('#more').append('<div>我是第'+i+'行</div>')
				}
			}
		</script>
	</body>
</html>