Question

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

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

/api/latest.json

，另一个用于搜索所有项目：

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

两个端点都接受“ page_limit ”参数，以及“页面”参数，因此：

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

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

以下是该方案：

只要我的页面加载（假设它是onLoad / documentLoaded），只加载最新项目的第一页
滚动事件处理程序附加到窗口，负责无限滚动

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

handleScroll()负责查看到达页面底部的时间，如果是，则执行getItems()，其中包含url，页码和每页项目数等参数as在内部增加page_number变量。

这一切都很好。

这是事情变得棘手的地方：

用户执行搜索（使用第二个端点）
所有结果都已更新（使用Vue.js的SPA）
用户向下滚动
当到达页面底部时，发出新请求但
它不是/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)

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

1 个答案: