触摸，滚动和交叉路口观察者回调的执行顺序

Question

此问题与触摸，滚动和相交观察者回调的执行顺序有关。

[我有一个简单的移动Web应用程序，它具有可滚动的列表视图，其中每个项目的高度均为100px，并且我在视口上放置了相交的Observer，但其上边距为-100px（rootMargin: "-100px 0px 0px 0px"）。

以这种方式完成，以便我的列表项目在向上滚动时就可以被观察到。

交叉口观察者是这样的：

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

我有touchmove处理程序，滚动处理程序和交集观察者回调。

现在，只要我触摸并向上滑动，就会看到在执行这些处理程序/回调时出现一致的行为。首先调用onTouchMove，然后调用onScroll，最后调用viewportBottomObserverCallback。总是这样吗？这个问题很重要，因为如果我知道这些DOM事件总是按此顺序调用，那么我的代码将变得非常确定。通常，其他任何DOM事件都不是这种情况。

为了更好地显示它，我附上了chrome探查器的屏幕截图。蓝色部分是我的路口观察员回调。

编辑：

我正在以响应模式在Chrome上对此进行测试，设备为iPhone 6/7/8。

另一个问题：仅在完成update layer tree，特别是此任务-https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo之后，任务（交叉观察器）到事件循环的计算和排队是否会发生？

Answer 1

总结-

所有微任务都在任何其他事件处理，渲染或任何其他宏任务发生之前完成。这保证了微任务之间的应用程序基本相同（没有鼠标坐标更改，没有新的网络数据等）。

是的！它是确定性的。

退一步，浏览器使用事件循环在脚本，渲染，绘画，联网，事件之间进行切换。在事件循环的每一轮中，将执行一个Macrotask。宏任务是诸如UI事件（mousemove），DOM操作和setTimeout之类的操作。使宏任务出队后，将运行微任务。因此，诸如[[IntersectionObserver和Promise.resolve之类的事情会在渲染和绘画之前在Microtask队列中发生。

https://www.w3.org/TR/intersection-observer/#event-loop

https://javascript.info/event-loop