feed 流数据请求时机的两个思路

最近 SF 首页 进行了大改版，效果如下：

其他地方都没什么难点，中间的 feed 流思考了不少时间，效果需要类似微博或者知乎 feed 流。之前一直没有做过类似的功能，现总结两个方案。

方案一

方案一也是目前线上方案，核心代码如下：

$(document).scroll(() => {
  if ($(document).scrollTop() + $(window).height() + 500 > $('.news-list').height() + $('.news-list').offset().top) {
    // to fetch the data
  }
})

500 为阈值，也就是提前 500px 去请求数据。$(document).scrollTop() 为滚条卷去的高度，$(window).height() 为视口高度，$('.news-list').height() 为 feed 流区域高度，$('.news-list').offset().top 为 feed 流区域和顶部的距离。

方案二

这个功能让我联想到了之前做图片延迟记载的功能，没错，翻阅了 教你实现图片的惰性加载，看到了代码：

if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
  // todo
}

让我们来看看它的判断。obj.getBoundingClientRect().top 是 obj 距离视口顶部的距离，需要和方案一 $('.news-list').offset().top 做下对比，前者是和视口顶部的距离，后者是和顶部（包括滚条卷去的长度）的距离，显然后者可能会比前者大很多；而 document.documentElement.clientHeight 其实就是视口的高度，同 $(window).height() 。

如果要用类似思路处理 feed 流，也是可以的。首先要找到这个 obj，这个 obj 可以是 feed 流区域（$('.news-list')）中最后一个元素，也可以是 feed 流区域（$('.news-list')）刚好下面的元素（SF 首页逻辑下目前即 footer），然后对其做滚动监听即可。