2016-01-26 10 views
12

W Chrome, jeśli użytkownik przewija wszystkie XHR, a setTimeouts będzie opóźnione, aż przewijanie się zatrzyma i potrzebuję obejścia tego problemu. Zachowanie jest opisane w this blog post. Chociaż ta funkcja pomaga w przewijaniu na urządzeniach mobilnych, jest katastrofalna w przypadku nieskończonego przewijania, co staram się robić.XHR/setTimeout/Obietnica nie kończy się, dopóki przewijanie nie zatrzyma się w Chrome.

dowody, że tak się dzieje:

  • Wszystkie inne przeglądarki działają bez zarzutu, Chrome pokazuje pusty ekran, dopóki użytkownik nie przestanie się przesuwać.

  • Panel sieci wyświetli wszystkie żądania jako pending, dopóki przewijanie się nie zakończy, a następnie wszystkie zostaną natychmiast zakończone.

  • Umieść to w urywku, uruchom, a następnie natychmiast rozpocznij przewijanie. Funkcja setTimeout nie zostanie wywołana, dopóki nie zakończy się przewijanie.

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

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

Czy używając 'requestAnimationFrame()' 'zamiast setTimeout()' zdarzyć, aby pomóc? W poście na blogu wyraźnie widać, że Chrome priorytetowo traktuje animację i zadania związane z GPU, dzięki czemu użytkownik nie odczuwa (co robi). – arthurakay

+0

Tak, to prawda! Jednak to nie pomaga XHRs, co ma znaczenie dla nieskończonego przewijania. – sakabako

+0

Mam dokładnie ten problem, chciałbym uzyskać odpowiedź. Założyłem dla ciebie nagrodę. –

Odpowiedz

1

Ponieważ ma to związek z silnikiem, nie sądzę obejście jest możliwe. Zamiast tego zgłosiłem zgłoszenie błędu w zespole Chrome.

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

+0

W jaki sposób SoundCloud i inne witryny nie mają tego problemu? Jest zdecydowanie sposób, aby temu zapobiec. –

+0

Naprawdę mam problem z odtworzeniem tego. Właśnie wziąłem szybką stronę z powyższym kodem timeout i dostaję wyjście konsoli podczas przewijania. –

+0

Wypróbuj za pomocą czegoś takiego jak XHR. Właśnie tam mam problemy. –

5

zależności od dokładnego scenariusza i żądanej pomocy przeglądarki, którą staram Service Workers - które są przeznaczone do zadań, takich jak ten, jesteś obsługi (a może przechwytywać cały ruch), lub do Web Workerdo your AJAX w tle.

1

Wierzę, że to może być związane z tą funkcją Chrome:

https://www.chromestatus.com/feature/5745543795965952 (detektory zdarzeń pasywne)

Chrome stara się unikać wykonywania pracy na telefon komórkowy, gdy użytkownik przewija, więc słuchanie touchmove wydarzenia mogą czasem programy obsługi opóźnień i limity czasu z wypalania.

Demo:
https://rbyers.github.io/scroll-latency.html
(sprawdź Handler Jank i przewijać strony)

+0

Sprawdziłem narzędzia dla programistów, które pokazywały niechcianych odbiorców z biblioteki 3rd party.Wyłączenie tej lib rozwiązało problemy z przewijaniem. –

+0

Dodałem pustego detektora zdarzeń do zdarzenia "kółka myszy" i to naprawiono dla mnie (podobnie do sugestii tutaj https://stackoverflow.com/a/47684257/6111857) – NDavis

Powiązane problemy