Javascript 触摸、滚动和交叉点观察者回调的执行顺序
此问题涉及触摸、滚动和交叉点观察者回调的执行顺序 我有一个简单的移动web应用程序,它有一个可滚动的列表视图,其中每个项目的高度为100px,我在视口中放置了交叉点观察者,但上边距为-100px(Javascript 触摸、滚动和交叉点观察者回调的执行顺序,javascript,google-chrome,scroll,touch,intersection-observer,Javascript,Google Chrome,Scroll,Touch,Intersection Observer,此问题涉及触摸、滚动和交叉点观察者回调的执行顺序 我有一个简单的移动web应用程序,它有一个可滚动的列表视图,其中每个项目的高度为100px,我在视口中放置了交叉点观察者,但上边距为-100px(rootMargin:“-100px 0px 0px 0px”) 它是以这种方式完成的,这样我的列表项一向上滚动就可以被观察到 交叉点观察者是这样的: const io = new IntersectionObserver(viewportBottomObserverCallback, { root
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浏览器的屏幕截图。蓝色内的部分是我的交叉点观察员回调
编辑:
我正在chrome上以响应模式进行测试,设备是iPhone 6/7/8
还有一个问题:任务(交叉口观察者)到事件循环的计算和排队是否仅在更新层树
完成后发生,具体来说,这项任务-?总结起来-
所有微任务在任何其他事件处理、渲染或任何其他宏任务发生之前完成。这保证了微任务之间的应用程序基本相同(没有鼠标坐标变化,没有新的网络数据等)。
是的!它是确定性的
退一步,浏览器使用事件循环在脚本、渲染、绘制、网络和事件之间切换。在事件循环的每个回合中,执行一个宏任务。宏任务是诸如UI事件(mousemove)、DOM操作和setTimeout之类的操作。微任务在宏任务退出队列后运行。因此,在渲染和绘制之前,IntersectionObserver和Promise.resolve之类的事情会发生在微任务队列中
总而言之-
所有微任务在任何其他事件处理、渲染或任何其他宏任务发生之前完成。这保证了微任务之间的应用程序基本相同(没有鼠标坐标变化,没有新的网络数据等)。
是的!它是确定性的
退一步,浏览器使用事件循环在脚本、渲染、绘制、网络和事件之间切换。在事件循环的每个回合中,执行一个宏任务。宏任务是诸如UI事件(mousemove)、DOM操作和setTimeout之类的操作。微任务在宏任务退出队列后运行。因此,在渲染和绘制之前,IntersectionObserver和Promise.resolve之类的事情会发生在微任务队列中