Touch，Scroll和Intersection观察者回调的执行顺序

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探查器的屏幕截图。蓝色部分是我的路口观察员回调。

编辑：

我正在使用设备为iPhone 6/7/8的响应模式在chrome上对其进行测试。

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

Answer 1

总结-

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

是的！它是确定性的。

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

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

https://javascript.info/event-loop