InteractionManager

InteractionManager는 상호작용이나 애니메이션이 완료된 후에 실행될 장시간 작업을 스케줄링할 수 있게 해준다. 특히 이는 JavaScript 애니메이션이 원활하게 실행되도록 돕는다.

애플리케이션은 다음과 같이 상호작용이 끝난 후에 실행될 작업을 스케줄링할 수 있다:

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을 통해 양보되어 터치와 같은 이벤트가 상호작용을 시작하고 큐에 있는 작업이 실행되지 않도록 막아 앱의 반응성을 높인다.

예제

기본

TypeScript

JavaScript

TypeScript

JavaScript

참고 자료

메서드

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);

양수 값을 인자로 전달하면 이벤트 루프 실행 시간이 지정된 deadline 값에 도달한 후 setTimeout을 사용해 작업을 스케줄링한다. 만약 deadline 값이 양수가 아니면 모든 작업을 하나의 setImmediate 배치로 실행한다(기본값).