🗑️ InteractionManager

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Przestarzałe

Unikaj długotrwałych zadań i zamiast tego użyj requestIdleCallback.

InteractionManager pozwala zaplanować czasochłonne zadania po zakończeniu wszystkich interakcji/animacji. Dzięki temu animacje JavaScript działają płynnie.

Aplikacje mogą planować zadania do wykonania po interakcjach za pomocą:

tsx

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

Porównaj z innymi metodami planowania:

• requestAnimationFrame() dla kodu animującego widok w czasie.

• setImmediate/setTimeout() wykonuje kod później, ale może opóźniać animacje.

• runAfterInteractions() wykonuje kod później bez opóźniania aktywnych animacji.

System obsługi dotknięć uznaje jeden lub więcej aktywnych dotknięć za "interakcję" i opóźni wywołania runAfterInteractions() do czasu zakończenia lub anulowania wszystkich dotknięć.

InteractionManager umożliwia także rejestrowanie animacji poprzez tworzenie "uchwytu interakcji" przy rozpoczęciu animacji i jego zwalnianie po zakończeniu:

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

runAfterInteractions przyjmuje albo zwykłą funkcję zwrotną, albo obiekt PromiseTask z metodą gen zwracającą Promise. Jeśli przekazano PromiseTask, jest on w pełni rozwiązany (wraz z asynchronicznymi zależnościami, które również planują zadania przez runAfterInteractions) przed rozpoczęciem kolejnego zadania dodanego wcześniej synchronicznie.

Domyślnie zadania w kolejce wykonywane są razem w jednej partii setImmediate. Jeśli wywołano setDeadline z liczbą dodatnią, zadania będą wykonywane tylko do momentu zbliżania się terminu (w kategoriach czasu działania pętli zdarzeń JS), po czym wykonanie zostanie wstrzymane przez setTimeout, umożliwiając rozpoczęcie interakcji (np. dotknięć) i blokując wykonanie zadań w kolejce, co zwiększa responsywność aplikacji.

---

Przykład

Podstawy

TypeScript

JavaScript

Zaawansowane

TypeScript

JavaScript

Dokumentacja

Metody

runAfterInteractions()

tsx

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

Planuje wykonanie funkcji po zakończeniu wszystkich interakcji. Zwraca anulowalną "obietnicę" (promise).

---

createInteractionHandle()

tsx

static createInteractionHandle(): Handle;

Powiadamia menedżera o rozpoczęciu interakcji.

---

clearInteractionHandle()

tsx

static clearInteractionHandle(handle: Handle);

Powiadamia menedżera o zakończeniu interakcji.

---

setDeadline()

tsx

static setDeadline(deadline: number);

Liczba dodatnia spowoduje użycie setTimeout do zaplanowania zadań po osiągnięciu przez eventLoopRunningTime wartości terminu. W przeciwnym razie wszystkie zadania wykonają się w jednej partii setImmediate (domyślnie).