xnew.timeout

xnew.timeout is setTimeout extended for xnew. The timeout is automatically cancelled when the owning unit is destroyed, so you don't need to stash the ID and call clearTimeout. You can also chain timeouts and transitions to build multi-step sequences without nesting callbacks.

Usage

const timeout = xnew.timeout(callback, interval);

Parameters:

• callback: Function to execute after the delay
• duration: Time in milliseconds before execution

Returns:

• A transition object with:
  • clear(): Cancel the transition
  • timeout(callback, duration): Chain another timeout
  • transition(callback, duration, easing): Chain another transition

Example

Basic Delayed Execution

xnew('<div>', (unit) => {
  unit.element.textContent = 'Click me!';

  unit.on('click', () => {
    unit.element.textContent = 'Clicked! Resetting in 2 seconds...';

    xnew.timeout(() => {
      unit.element.textContent = 'Click me!';
    }, 2000);
  });
});

Canceling a Timeout

xnew('<button>', (unit) => {
  unit.element.textContent = 'Start countdown';

  let timeout;

  unit.on('click', () => {
    // Cancel previous timeout if exists
    if (timeout) {
      timeout.clear();
    }

    unit.element.textContent = 'Countdown started...';

    timeout = xnew.timeout(() => {
      unit.element.textContent = 'Done!';
    }, 3000);
  });
});

Automatic Cleanup

When a unit is finalized, all its timeouts are automatically cleared:

const unit = xnew((unit) => {
  xnew.timeout(() => {
    console.log('This will never execute');
  }, 5000);

  // Finalize after 1 second
  xnew.timeout(() => {
    unit.finalize(); // Automatically clears the 5-second timeout
  }, 1000);
});