2016-01-26 67 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

相關問題