JavaScript 无限滚动 + 延迟加载 - 如何确定 HTTP 请求的优先级(它正在占用可用连接)？

Question

我在我的网站上构建了自定义无限滚动，它通过调用 API 端点根据滚动方向简单地加载 6 个下一个或 6 个之前的帖子:

$.get('/api/post/' + chunkToLoadNow + '/' + categoryToLoad + '/', function (response) {
   // appends or prepends a container with some html content
}

这非常有效。关键是附加或前置的 HTML 还包含图像的延迟加载类，因此一旦注入(inject)标记并且该部分位于视口(viewport)中，插件就会为 6 个缩略图发出 6 个 http 请求。有道理。

假设我向下滚动，它加载(注入(inject))6 个帖子的内容并自动激活 6 个图像 http 请求，然后我滚动得更快，现在下一个 HTTP 调用到我的 /api/post/2/0 在延迟加载插件完成获取我不关心的图像之前不会被调用，因为它们属于视口(viewport)上方的 block (我对下一个感兴趣)。

最终效果是，当我滚动足够快时，它会为 2 个 block 注入(inject)标记并请求 12 张图像，第 3 个 block 将需要等待很长时间，用户会抓狂。

是否有一种 JS 方法可以退出已经开始但未完成的打开的 HTTP 请求？或者我能否以某种方式明确地将 API 端点的优先级设置为与我网站中对 jpeg 的 HTTP 请求一样重要？

Answer 1

您可以通过更改其 src 来中止图像加载请求:

img.src = ''; 

对于普通的 ajax 请求，你可以这样做:

var req = $.ajax(...); 
req.abort();