javascript - $(window).height() 不会动态更新

Question

我有这个加载数据的代码。当用户向下滚动屏幕的一半时，它会继续加载数据并将 HTML 附加到文档中。 问题是 $(window).height() 在 HTML 更改后不会即时更新 因此条件表达式出错。如何解决？

// Check scrollbar is down a half.
$(window).scroll(function() {
    console.log("flag: " + flag);       
    console.log($(window).scrollTop());
    console.log($(window).height());

    if (($(window).scrollTop()  > $(window).height() / 2)) { 
        if(flag == 0) {
            console.log("Load data");
            loadData(globalIndex, globalCount);
            globalIndex += 40;
        }
        flag = 1;

    } else {
        flag = 0;
    }
});

Answer 1

除非您调整浏览器屏幕的大小，否则您的窗口高度不会改变。您的公式的问题在于，为了使其起作用，您需要加载足够的数据以将滚动条移回中点上方。如果不这样做，此公式将不断返回真值，并且您将调用 loadData 的次数远远超出您的预期。

作为一种潜在的解决方法(取决于加载数据所需的时间)，您可以在滚动条到达窗口底部后调用 loadData。这种情况发生的频率远低于您当前的情况，并且它只会在您的用户尝试查看数据时加载数据。如果数据加载很快，那么这是一个简单的解决方案。如果这是一个耗时的过程，并且这就是您选择在到达中间点后加载数据的原因，那么请考虑一次加载更多数据，并包括一个微调器或其他一些视觉线索来通知用户数据是加载中。