Skip to main content

InteractionManager

InteractionManager는 인터랙션과 애니메이션이 완료된 후에 장시간 실행되는 작업을 예약할 수 있게 한다. 특히, 이는 자바스크립트 애니메이션이 원활하게 실행되도록 돕는다.

애플리케이션은 다음과 같이 인터랙션이 끝난 후에 실행될 작업을 예약할 수 있다:

tsx
InteractionManager.runAfterInteractions(() => {
  // ...장시간 실행되는 동기 작업...
});

다른 스케줄링 옵션과 비교해 보자:

  • requestAnimationFrame()은 시간에 따라 뷰를 애니메이션화하는 코드에 사용한다.
  • setImmediate/setTimeout()은 코드를 나중에 실행하지만, 이는 애니메이션을 지연시킬 수 있다.
  • runAfterInteractions()는 활성 애니메이션을 지연시키지 않고 코드를 나중에 실행한다.

터치 처리 시스템은 하나 이상의 활성 터치를 '인터랙션'으로 간주하며, 모든 터치가 끝나거나 취소될 때까지 runAfterInteractions() 콜백을 지연시킨다.

InteractionManager는 또한 애플리케이션이 애니메이션 시작 시 인터랙션 '핸들'을 생성하고 완료 시 이를 해제함으로써 애니메이션을 등록할 수 있게 한다:

tsx
const handle = InteractionManager.createInteractionHandle();
// 애니메이션 실행... (`runAfterInteractions` 작업이 큐에 추가됨)
// 나중에, 애니메이션 완료 시:
InteractionManager.clearInteractionHandle(handle);
// 모든 핸들이 해제되면 큐에 있는 작업이 실행됨

runAfterInteractions는 일반 콜백 함수나 Promise를 반환하는 gen 메서드를 가진 PromiseTask 객체를 받는다. PromiseTask가 제공되면, 이전에 동기적으로 큐에 추가된 다음 작업을 시작하기 전에 완전히 해결된다(또한 runAfterInteractions를 통해 더 많은 작업을 예약하는 비동기 의존성도 포함).

기본적으로, 큐에 있는 작업은 하나의 setImmediate 배치에서 함께 실행된다. setDeadline이 양수로 호출되면, 작업은 데드라인(js 이벤트 루프 실행 시간 기준)이 다가올 때까지만 실행되고, 그 시점에서 실행은 setTimeout을 통해 양보되어 터치와 같은 이벤트가 인터랙션을 시작하고 큐에 있는 작업이 실행되지 않도록 막아 앱의 반응성을 높인다.

예제​

기본​

참고 자료

메서드​

runAfterInteractions()​

tsx
static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask);

모든 상호작용이 완료된 후 실행할 함수를 예약한다. 취소 가능한 "Promise"를 반환한다.

createInteractionHandle()​

tsx
static createInteractionHandle(): Handle;

매니저에게 상호작용이 시작되었음을 알린다.

clearInteractionHandle()은 상호작용이 완료되었음을 관리자에게 알리는 역할을 한다.

tsx
static clearInteractionHandle(handle: Handle);

setDeadline()​

tsx
static setDeadline(deadline: number);

양수 값을 설정하면 setTimeout을 사용해 이벤트 루프 실행 시간이 deadline 값에 도달한 후에 모든 작업을 예약한다. 그렇지 않으면 모든 작업이 하나의 setImmediate 배치로 실행된다(기본값).