javascript - 从两个不同的 API 端点无限滚动

Question

问题也可以标题为“在窗口上附加两个不同的滚动事件处理程序并以编程方式在它们之间切换

我有两个端点，第一个端点为我带来了“最新”项目的列表:

/api/latest.json

另一个用于搜索所有项目:

/api/items.json?q="mission+impossible"

两个端点都接受“page_limit”参数以及“page”参数，因此:

/api/latest.json?page_limit=10&page=1

将获取第一页的项目，上限为 10 个项目。

这是场景:

1. 一旦我的页面加载(假设它是 onLoad/documentLoaded)，仅加载最新项目的第一页
2. 滚动事件处理程序附加到窗口，负责无限滚动

window.addEventListener('scroll',throttle(() => this.handleScroll('api/latest.json'), 450))

handleScroll() 负责查看何时到达页面底部，如果到达，则执行 getItems() ，它将 url、页码、和每页的项目数，以及在内部增加 page_number 变量。

这一切都运行良好。

这里是事情变得棘手的地方:

1. 用户执行搜索(使用第二个端点)
2. 所有结果均已更新(这是使用 Vue.js 的 SPA)
3. 用户向下滚动
4. 到达页面底部时，会发出新请求，但是
5. 这不是 /api/items.json?page_number=2&q="mission+impossible" 的第二页，而是来自 /api/latest.json?page_number=2 的第二页

因此，理论上，handleScroll 函数应该知道(可能使用一些 Vue.js 魔法)当前上下文:

• 用户是否执行过搜索
• 他是否正在盯着latest.json最初加载的页面

Answer 1

您的问题有点不清楚，但听起来您想要触发两个操作之一。完成此操作的最简单方法是编写一个滚动处理程序，该处理程序可以决定要触发哪个操作，然后相应地运行它。在下面的示例中，我按顺序运行它们，但如果需要，您可以根据其他状态来决定。

例如:

 var handlers = [
    getItems('api/latest.json', 10, 1, 450),
    doSearch // handler involving your other endpoint
 ]
 var nextHandler = 0;

 function scrollHandler(e){
   handlers[nextHandler++](e);
   nextHandler = nextHandler % handlers.length; // wrap around if necessary
 }

 window.addEventListener('scroll', scrollHandler)