XHR / setTimeout / Promise直到滚动停止在Chrome中才完成

Question

在Chrome中，如果用户滚动所有XHR并且setTimeouts将被延迟，直到滚动停止，我需要一个解决方法。 此博客文章中描述了此行为。 虽然这个功能有助于移动滚动，但对于无限滚动来说却是灾难性的，这正是我想要做的。

发生这种情况的证据：

• 所有其他浏览器都能正常工作，Chrome会显示一个空白屏幕，直到用户停止滚动。

• 网络面板将所有请求显示为pending直到滚动结束，然后它们全部完成。

• 把它放在一个片段中，运行它然后立即开始滚动。 滚动完成后才会调用setTimeout。

var p = new Promise(function (resolve) {
    setTimeout(function () {
        console.log('resolving');
        resolve();
    }, 1000)
});

p.then(function () {
    console.log('DONE!!');
})

Answer 1

根据您的具体情况和所需的浏览器支持，我会尝试服务工作者 - 这些工作适用于您正在处理的任务（并且可以拦截所有流量），或者Web工作人员在后台执行您的AJAX 。

Answer 2

由于这与引擎有关，我认为没有可行的解决方法。 相反，我已向Chrome团队提交了错误报告。

https://bugs.chromium.org/p/chromium/issues/detail?id=661155

Answer 3

我相信这可能与此Chrome功能有关：

https://www.chromestatus.com/feature/5745543795965952 （被动事件监听器）

当用户滚动时，Chrome会尝试避免在移动设备上进行操作，因此，有时会听取touchmove事件延迟处理程序的运行以及触发超时。

演示：
https://rbyers.github.io/scroll-latency.html
（检查Handler Jank并滚动页面）

Answer 4

我有一个无限滚动和图像砌成的相同问题，最后能够“强制”铬通过模拟文档点击停止去除更多图像的请求。 我知道这听起来很奇怪，但是当我测试时，只要我滚动，请求就会无限地去抖动，但只要我点击一次，它就会立即执行XHR。

这是我如何做到的......：

export function getPosts() {
  return (dispatch: Dispatch<any>, getState) => {
    const { postFeedState }: IGlobalState = getState();

    dispatch(handlePostsCancellation())

    dispatch({ type: postFeedTypes.GET_POSTS_REQUEST });

    const feedFilterDto = getFeedFilterDto(getState);

    // this is where the clicks are simulated  
    setTimeout(() => {
      for (let i = 0; i < 3; i++) {
        const evt = document.createEvent("Events");
        evt.initEvent("click", true, true);
        window.dispatchEvent(evt);
      }
    }, 50);

    return dispatch(setCancelSource(postFeedTypes.SET_MAIN_FEED_POSTS_CANCEL_SOURCE))
      .then((source) => PostController.getMainFeedPosts(postFeedState.get("postsToSkip"), FeedDisplay.THREE_COLUMNS, feedFilterDto, source))
      .then(posts => dispatch(getPostsSuccess(posts)))
      .catch(error => {
        if (axios.isCancel(error)) return;

        dispatch({ type: postFeedTypes.GET_POSTS_FAILURE });

        dispatch(handleApiError(error, null));
      });
  }
}

我首先尝试只点击一次，它几乎一直工作，然后尝试2-3次点击并一直工作。 说实话，我仍然对这个超时/点击代码感到有些奇怪，但是什么都有效，有效！ 此外，时间将证明这是否会继续工作，但目前这是我发现的最佳解决方案和最简单的解决方案。

PS：我使用redux和axios并为我的端点（PostController）拥有自己的自定义类，但它所做的只是一个axios（XHR）请求。