Последовательность выполнения обратного вызова наблюдателя Touch, Scroll и Intersection - PullRequest
Новая
       87

Последовательность выполнения обратного вызова наблюдателя Touch, Scroll и Intersection

0 голосов
/ 03 марта 2019

Этот вопрос касается последовательности выполнения обратного вызова обозревателя касания, прокрутки и пересечения.

У меня есть простое мобильное веб-приложение, которое имеет прокручиваемый вид списка, где каждый элемент имеет высоту 100px, и у меня есть пересечениеОбозреватель помещается в область просмотра, но с верхним полем -100px (rootMargin: "-100px 0px 0px 0px").

Это делается таким образом, чтобы мой элемент списка можно было наблюдать, как только он прокручивается вверх.

Наблюдатель пересечения выглядит следующим образом: 

const io = new IntersectionObserver(viewportBottomObserverCallback, {
  root: null,
  rootMargin: "-100px 0px 0px 0px",
  threshold: [0, 1]
})

У меня есть обработчик сенсорного перемещения, обработчик прокрутки и обратный вызов наблюдателя пересечения.

Теперь, как только я коснусь и проведу пальцем вверх, я вижуповедение при выполнении этих обработчиков / обратных вызовов.Сначала вызывается onTouchMove, затем вызывается onScroll и наконец вызывается viewportBottomObserverCallback.Это всегда так?Этот вопрос важен, потому что, если я знаю, что эти события DOM всегда вызываются в этой последовательности, тогда мой код станет очень детерминированным.Как правило, это не относится к любым другим событиям DOM.

Для лучшей наглядности я прилагаю скриншот профилировщика моего chrome.Часть, выделенная синим цветом, является моим обратным вызовом наблюдателя пересечения.

enter image description here

РЕДАКТИРОВАТЬ:

Я тестирую это на Chrome в адаптивном режиме с устройствомiPhone 6/7 / 8.

Еще один вопрос: происходит ли вычисление и организация очередей задач (наблюдатель пересечения) в цикл событий только после выполнения update layer tree, в частности, эта задача - https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo?

...