2016-01-26 116 views
12

在Chrome中,如果用户滚动所有XHR并且setTimeouts将被延迟,直到滚动停止,我需要一个解决方法。行为在this blog post中描述。虽然此功能可帮助移动滚动,但无限滚动是灾难性的,这正是我想要做的。XHR/setTimeout/Promise没有完成,直到Chrome中的滚动停止

证据表明这种情况正在发生:

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

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

  • 把它放在一个代码片段中,运行它然后立即开始滚动。直到滚动结束后才会调用setTimeout。

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

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

是否使用'requestAnimationFrame()'而不是'的setTimeout()'正好帮助?博客文章清楚地表明,Chrome将动画和GPU相关的任务放在了优先位置,因此用户体验(他们正在做什么)不会受到影响。 – arthurakay

+0

是的,它的确如此!然而,这对XHRs没有帮助,这对无限滚动来说很重要。 – sakabako

+0

我有这个确切的问题,很想得到答案。为你开始赏金。 –

回答

1

因为这是与发动机做的,我不认为一个解决办法是可行的。相反,我已经向Chrome团队提交了一份错误报告。

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

+0

SoundCloud和其他网站如何没有这个问题呢?肯定有办法阻止它。 –

+0

我实际上在重现这个问题。我刚刚使用上面的超时代码创建了一个快速页面,并在滚动时获得控制台输出。 –

+0

尝试用XHR之类的东西。这是我遇到问题的地方。 –

1

我相信这可能与该浏览器的功能:

https://www.chromestatus.com/feature/5745543795965952(被动事件侦听器)

Chrome会尽量避免在当用户滚动移动做的工作,所以听touchmove事件有时会正在运行的延迟处理程序以及正在触发的超时。

演示:
https://rbyers.github.io/scroll-latency.html
(检查处理器JANK和页面各处滚动)

+0

我检查了开发工具,它显示来自第三方库的一些不需要的触摸监听器。禁用这个lib解决了我的滚动问题。 –

+0

我向“mousewheel”事件添加了一个空的事件侦听器,并为我解决了这个问题(类似于https://stackoverflow.com/a/47684257/6111857中的建议) – NDavis

相关问题