Javascript 如何基于滚动事件延迟渲染大型数据集？

我有一个很大的

数据集

，想知道如何懒洋洋地渲染

数据集

？我能够在视图端口中呈现数据。当用户滚动页面时，如何呈现剩余数据

到目前为止，在我的自定义绑定中，我这样做是为了加快我的初始页面加载

var elementRelativeHeight = $element.offset().top;
var windowHeight = $(window).height();

if(elementRelativeHeight > windowHeight) {
    //How do I register a callback so it template is rendered upon scroll?
} else {
    $("#mydiv").appendChild($element);
}

---

在处理要显示的大数据块时，请务必记住，一次显示1000个项目实际上没有意义，因为如果项目高度为

50px

，而视口高度为

1000px

，则只能看到20个项目，其余项目将被隐藏。所以，为什么不在滚动列表时加载一些数据，慢慢显示这些数据呢

这是一个完整的例子。通过在向下滚动时加载更多数据（通过计算屏幕外的项目数量），如果计数小于5，则表示您只剩下很少的项目可供滚动，因此可以安全地添加更多项目。这也将增加一个看不见的体验，这样用户将永远不会触及边缘，除非什么都没有留下

$（文档）.ready（函数（）{
var数据=[]；
/*我们每次迭代加载多少项*/
var displayLimit=30；
var灵敏度=300；
var scrollTimeout=false；
/*跟踪正在显示的项目*/
var displayData=[]；
对于（变量i=0；i<1000；i++）{
数据推送（“项目-”+i）；
}
var loadData=function（）{
/*[0]表示使用javascript对象而不是jquery。
在循环中不要使用$（）是非常重要的，除非它是
绝对必要。因为这将导致严重的性能问题
如果可以放在外面，就把它放在外面。
*/
var容器=$（“.items”）[0]
对于（变量i=0；idata.length）{
打破
}
var项目=数据[currentIndex]；
显示数据推送（项目）；
var元素=document.createElement（“div”）；
元素。类列表。添加（“项”）；
element.innerHTML=项目；
container.appendChild（元素）；
}
};
/*在开始时加载数据*/
loadData（）；
$（“.scrollable”）.scroll（函数（事件）{
var-edge=false；
/*可滚动容器的高度*/
var height=$（event.target）.height（）；
/*指您已滚动的内容*/
var scrollY=$（event.target）.scrollTop（）；
/*可滚动内容的像素量*/
var scrollHeight=event.target.scrollHeight；
/*如果我们碰巧撞到了边缘但是超时了
仍然有效，不管如何调用该函数
*/
如果（高度+滚动==滚动高度）{
边缘=真；
}
如果（！滚动超时）||
（边缘）{
/*在处理滚动加载时
限制次数是非常重要的
调用此事件。如果此事件不在此处，
您会注意到调用了此回调
很多次了，所以我们不想让这件事
稍后会出现性能问题。
*/
scrollTimeout=true；
setTimeout（函数（）{
scrollTimeout=false；
}敏感性）；
var计数=0；
var toScroll=toScroll；
var items=$（“.items.item”）；
/*计算屏幕外有多少项*/
对于（变量i=0；i当前Y）{
计数++；
}
/*再也没必要数数了
如果我们想在有
还有5个项目需要滚动*/
如果（计数>toScroll）{
打破
}
}
/*如果要滚动的项目不超过5个
loadMore（）数据
*/
如果（网上有很多关于延迟加载的例子。解决方案实际上取决于数据是什么以及您需要如何获取数据。我更新了问题的标题。我熟悉延迟渲染，但不确定如何基于滚动事件进行延迟渲染。您可以添加一个事件侦听器，并了解用户离屏幕底部有多近。如果我正在努力写那篇文章。如果你想给我举个例子，那就太好了。