createAsyncDelay

The createAsyncDelay hook provides a way to create a async function that will delay execution for a specified number of milliseconds of ticker time.

It ensures that the delay is in sync with the shared ticker’s time units, making it ideal for animations or syncing with other actions based on ticker time.

The delay is synchronized with the shared ticker, so it will not progress if the ticker is paused or stopped.

This hook must be called within a SolidJS tracking scope, such as a component or another hook, that is a descendant of PixiApplication or TickerProvider.

The returned function can be called in an async context.

Usage

import { createAsyncDelay, Text } from "pixi-solid";

const DelayedActionComponent = () => {
  // This must be called within a synchronous scope that is inside the `PixiApplication` or `TickerProvider` elements.
  const delay = createAsyncDelay();

  const handlePointerDown = async () => {
    console.log("Pointer down");
    // We can now use the delay in an async context
    await delay(2000);
    console.log("2 seconds have passed on the ticker");
  };

  return <Text text={"Click me"} onpointerdown={handlePointerDown} />;
};

When to use it

• When you need to delay execution in a way that is synchronized with the ticker.
• For animations or other operations that depend on the ticker’s timing.
• To avoid using external time measurements like setTimeout in ticker-dependent contexts.