跳至主内容
版本:0.79

定时器

非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

定时器是应用程序的重要组成部分,React Native 实现了浏览器定时器

定时器

  • setTimeout, clearTimeout

  • setInterval, clearInterval

  • setImmediate, clearImmediate

  • requestAnimationFrame, cancelAnimationFrame

requestAnimationFrame(fn)setTimeout(fn, 0) 不同——前者会在所有帧刷新完成后触发,而后者会尽可能快地触发(在 iPhone 5S 上每秒超过 1000 次)。

setImmediate 在当前 JavaScript 执行块结束时运行,恰好在将批处理响应发送回原生端之前。请注意,如果在 setImmediate 回调中再次调用 setImmediate,它会立即执行,中间不会交还控制权给原生环境。

Promise 的实现使用 setImmediate 作为其异步处理机制。

备注

在 Android 上调试时,如果调试器和设备的时间不同步,可能会导致动画、事件行为等功能异常或结果不准确。 请在调试机器上执行 adb shell "date `date +%m%d%H%M%Y.%S%3N`" 命令进行校正。真机使用时需要 root 权限。

InteractionManager

优质原生应用感觉流畅的关键原因之一,是避免了在交互和动画期间执行高开销操作。在 React Native 中,我们目前存在单 JS 执行线程的限制,但您可以使用 InteractionManager 来确保耗时任务安排在交互/动画完成后启动。

应用可通过以下方式安排交互后执行的任务:

tsx
InteractionManager.runAfterInteractions(() => {
// ...long-running synchronous task...
});

与其他调度方案的对比:

  • requestAnimationFrame():适用于随时间推移的视图动画代码

  • setImmediate/setTimeout/setInterval():延迟执行代码,注意可能影响动画

  • runAfterInteractions():延迟执行代码,且不会阻塞进行中的动画

触摸处理系统将一次或多次有效触摸视为"交互",会延迟执行 runAfterInteractions() 回调,直到所有触摸事件结束或被取消。

InteractionManager 还允许应用通过创建交互"句柄"来注册动画——在动画开始时创建句柄,并在完成时清除:

tsx
const handle = InteractionManager.createInteractionHandle();
// run animation... (`runAfterInteractions` tasks are queued)
// later, on animation completion:
InteractionManager.clearInteractionHandle(handle);
// queued tasks run if all handles were cleared