滚动到页面末尾时更新工作...但不断更新

Question

我在包含此代码的VueJS组件中有一个滚动事件。基本上当我到达文档末尾时，它会通过AJAX更新Jobs()。

if ( windowScrollTop >= (documentHeight - windowHeight - 50) )
{
        this.updateJobs();
}

现在可以正常工作并更新和显示作业。问题是，它不会停止;出于某种原因，它会不断更新，直到它抽出所有数据页。

我认为它会在第一次更新后停止并呈现，因为if语句将为false。但是，滚动事件触发时不会更新各种位置和高度以反映新数据的新位置（不在文档末尾）。

我应该添加一个setTimeout来给它渲染时间吗？有更好的解决方案吗？

Answer 1

这是因为您使用的是windowScrollTop >= (documentHeight - windowHeight - 50，这意味着windowScrollTop有50次机会大于或等于页面高度的最后50 px。

所以你最好还检查另一个条件

var scrollUpdateFired = false;
if ( windowScrollTop >= (documentHeight - windowHeight - 50) && !scrollUpdateFired)
{
        scrollUpdateFired = true;
        this.updateJobs();
} 

然后在你的ajax的promise sucess回调中将scrollUpdateFired的值设置为false