Temporizadores

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Los temporizadores son una parte fundamental de las aplicaciones, y React Native implementa los temporizadores del navegador.

Temporizadores

• setTimeout y clearTimeout

• setInterval y clearInterval

• setImmediate y clearImmediate

• requestAnimationFrame y cancelAnimationFrame

requestAnimationFrame(fn) no es lo mismo que setTimeout(fn, 0): el primero se activa después de que todos los fotogramas se hayan procesado, mientras que el segundo se dispara lo más rápido posible (más de 1000 veces por segundo en un iPhone 5S).

setImmediate se ejecuta al final del bloque actual de ejecución de JavaScript, justo antes de enviar la respuesta agrupada al entorno nativo. Ten en cuenta que si llamas a setImmediate dentro de un callback de setImmediate, se ejecutará inmediatamente sin ceder al entorno nativo entre medias.

La implementación de Promise utiliza setImmediate para su gestión de asincronía.

nota

Al depurar en Android, si hay desfase horario entre el depurador y el dispositivo, elementos como animaciones, comportamiento de eventos, etc., podrían no funcionar correctamente o dar resultados inexactos. Soluciona esto ejecutando adb shell "date `date +%m%d%H%M%Y.%S%3N`" en tu máquina de depuración. Se requiere acceso root en dispositivos físicos.

InteractionManager

Obsoleto

El comportamiento de InteractionManager se ha modificado para ser idéntico a setImmediate, que debe usarse en su lugar.

Una razón por la que las apps nativas bien construidas se sienten tan fluidas es porque evitan operaciones costosas durante interacciones y animaciones. En React Native, actualmente tenemos la limitación de un único hilo de ejecución JS, pero puedes usar InteractionManager para programar tareas largas después de que terminen las interacciones/animaciones.

Las aplicaciones pueden programar tareas para ejecutarse después de interacciones usando:

tsx

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

Compare esto con otras alternativas de programación:

• requestAnimationFrame(): para código que anima vistas en el tiempo

• setImmediate/setTimeout/setInterval(): ejecuta código después (puede retrasar animaciones)

• runAfterInteractions(): ejecuta código después sin retrasar animaciones activas

El sistema táctil considera uno o más toques activos como una 'interacción' y retrasará los callbacks de runAfterInteractions() hasta que todos los toques finalicen o se cancelen.

InteractionManager también permite que las aplicaciones registren animaciones creando un 'handle' de interacción al iniciar la animación, y eliminándolo al completarse:

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