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

Question

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

我有两个端点，第一个给我一个“最新”项目列表：

/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)