Skip to main content

定时器

计时器是应用的重要组成部分，React Native 实现了 浏览器定时器。

¥Timers are an important part of an application and React Native implements the browser timers.

定时器​

¥Timers

  • 设置超时、清除超时

    ¥setTimeout, clearTimeout

  • 设置间隔、清除间隔

    ¥setInterval, clearInterval

  • 设置立即、清除立即

    ¥setImmediate, clearImmediate

  • requestAnimationFrame, cancelAnimationFrame

requestAnimationFrame(fn) 与 setTimeout(fn, 0) 不同 - 前者将在所有帧刷新后触发，而后者将尽快触发（在 iPhone 5S 上每秒超过 1000 倍）。

¥requestAnimationFrame(fn) is not the same as setTimeout(fn, 0) - the former will fire after all the frames have flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S).

setImmediate 在当前 JavaScript 执行块的末尾执行，就在将批量响应发送回原生之前。请注意，如果你在 setImmediate 回调中调用 setImmediate，它将立即执行，而不会在中间返回到原生。

¥setImmediate is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call setImmediate within a setImmediate callback, it will be executed right away, it won't yield back to native in between.

Promise 实现使用 setImmediate 作为其异步实现。

¥The Promise implementation uses setImmediate as its asynchronicity implementation.

注意

在 Android 上调试时，如果调试器和设备之间的时间发生了漂移；动画、事件行为等可能无法正常工作或者结果可能不准确。请通过在调试器计算机上运行 adb shell "date date +%m%d%H%M%Y.%S%3N" 来更正此问题。在真实设备中使用需要 root 访问权限。

¥When debugging on Android, if the times between the debugger and device have drifted; things such as animation, event behavior, etc., might not work properly or the results may not be accurate. Please correct this by running adb shell "date `date +%m%d%H%M%Y.%S%3N`" on your debugger machine. Root access is required for the use in real device.

InteractionManager​

精心构建的原生应用感觉如此流畅的原因之一是避免交互和动画期间昂贵的操作。在 React Native 中，我们目前有一个限制，即只有一个 JS 执行线程，但你可以使用 InteractionManager 来确保长时间运行的工作安排在任何交互/动画完成后开始。

¥One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use InteractionManager to make sure long-running work is scheduled to start after any interactions/animations have completed.

应用可以安排任务在与以下交互后运行：

¥Applications can schedule tasks to run after interactions with the following:

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

将此与其他调度方案进行比较：

¥Compare this to other scheduling alternatives:

  • requestAnimationFrame():随着时间的推移对视图进行动画处理的代码。

    ¥requestAnimationFrame(): for code that animates a view over time.

  • setImmediate/setTimeout/setInterval():稍后运行代码，请注意这可能会延迟动画。

    ¥setImmediate/setTimeout/setInterval(): run code later, note this may delay animations.

  • runAfterInteractions()：稍后运行代码，而不会延迟活动动画。

    ¥runAfterInteractions(): run code later, without delaying active animations.

触摸处理系统将一个或多个活动触摸视为 'interaction'，并将延迟 runAfterInteractions() 回调，直到所有触摸都结束或取消。

¥The touch handling system considers one or more active touches to be an 'interaction' and will delay runAfterInteractions() callbacks until all touches have ended or been cancelled.

InteractionManager 还允许应用通过在动画开始时创建交互 'handle' 并在完成时清除它来注册动画：

¥InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:

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