@solid-primitives/scheduled

@solid-primitives/scheduled

Primitives for creating scheduled — throttled or debounced — callbacks.

• debounce - Creates a callback that is debounced and cancellable.
• throttle - Creates a callback that is throttled and cancellable.
• scheduleIdle - Creates a callback throttled using window.requestIdleCallback().
• leading - Creates a scheduled and cancellable callback that will be called on leading edge.

Installation

npm install @solid-primitives/scheduled
# or
yarn add @solid-primitives/scheduled

debounce

Creates a callback that is debounced and cancellable. The debounced callback is called on trailing edge.

The timeout will be automatically cleared on root dispose.

How to use it

import { debounce } from "@solid-primitives/scheduled";

const trigger = debounce((message: string) => console.log(message), 250);
trigger("Hello!");
trigger.clear(); // clears a timeout in progress

throttle

Creates a callback that is throttled and cancellable. The throttled callback is called on trailing edge.

The timeout will be automatically cleared on root dispose.

How to use it

import { throttle } from "@solid-primitives/scheduled";

const trigger = throttle((message: string) => console.log(message), 250);
trigger("Hello!");
trigger.clear(); // clears a timeout in progress

scheduleIdle

Creates a callback throttled using window.requestIdleCallback(). (MDN reference)

The throttled callback is called on trailing edge.

The timeout will be automatically cleared on root dispose.

Note: requestIdleCallback is not available in Safari. If it's not available, scheduleIdle will fallback to throttle with default timeout. (callbacks will be batched using setTimeout instead)

How to use it

import { scheduleIdle } from "@solid-primitives/scheduled";

const trigger = scheduleIdle(
  (message: string) => console.log(message),
  // timeout passed to requestIdleCallback is a maximum timeout before the callback is called
  250
);
trigger("Hello!");
trigger.clear(); // clears a timeout in progress

leading

Creates a scheduled and cancellable callback that will be called on leading edge.

The timeout will be automatically cleared on root dispose.

How to use it

// with debounce
import { leading, debounce } from "@solid-primitives/scheduled";

const trigger = leading(debounce, (message: string) => console.log(message), 250);
trigger("Hello!");
trigger.clear(); // clears a timeout in progress

// with throttle
import { leading, throttle } from "@solid-primitives/scheduled";

const trigger = leading(throttle, (message: string) => console.log(message), 250);
trigger("Hello!");
trigger.clear(); // clears a timeout in progress

Scheduling explanation

This package provides 4 different methods for scheduling a callback. Pick one that suits your application.

TOP: scheduled function triggered
BOTTOM: called user callback

1. debounce
2. throttle
3. leading debounce
4. leading throttle

   █   █     █
------------------------>
1.                  █
2.        █         █
3. █
4. █         █

Interactive DEMO of the schematic above

Changelog

See CHANGELOG.md