or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-solid-primitives--scheduled

Primitives for creating scheduled — throttled or debounced — callbacks.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@solid-primitives/scheduled@1.5.x

To install, run

npx @tessl/cli install tessl/npm-solid-primitives--scheduled@1.5.0

index.mddocs/

Solid Primitives Scheduled

Solid Primitives Scheduled provides comprehensive SolidJS primitives for creating scheduled callbacks including debounce, throttle, leading edge schedulers, and idle-time scheduling capabilities. All functions integrate seamlessly with SolidJS's reactive system and lifecycle management, automatically clearing timeouts on root disposal.

Package Information

  • Package Name: @solid-primitives/scheduled
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @solid-primitives/scheduled

Core Imports

import { 
  debounce, 
  throttle, 
  scheduleIdle, 
  leading, 
  leadingAndTrailing, 
  createScheduled,
  type ScheduleCallback,
  type Scheduled
} from "@solid-primitives/scheduled";

For individual imports:

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

Basic Usage

import { debounce, throttle, createScheduled } from "@solid-primitives/scheduled";
import { createEffect, createSignal } from "solid-js";

// Basic debouncing
const debouncedFn = debounce((message: string) => console.log(message), 250);
debouncedFn("Hello!");
debouncedFn.clear(); // Cancel pending execution

// Basic throttling  
const throttledFn = throttle((value: number) => console.log(value), 100);
throttledFn(42);
throttledFn.clear(); // Cancel pending execution

// Reactive scheduling with createScheduled
const scheduled = createScheduled(fn => debounce(fn, 1000));
const [count, setCount] = createSignal(0);

createEffect(() => {
  const value = count();
  if (scheduled()) {
    console.log("Debounced count:", value);
  }
});

Architecture

The package is built around several key concepts:

  • Scheduled Callbacks: Core timing functions that wrap user callbacks with scheduling logic
  • SolidJS Integration: Automatic cleanup via onCleanup() when reactive roots are disposed
  • Server-Side Compatibility: Safe no-op implementations when running in server environments
  • Cross-Browser Support: Graceful fallbacks for APIs not available in all browsers
  • Type Safety: Full TypeScript generic support preserving callback argument types
  • Cancellation: All scheduled functions provide .clear() methods for manual cancellation

Capabilities

Debounce

Creates a debounced callback that executes on the trailing edge after the specified delay.

/**
 * 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.
 */
function debounce<Args extends unknown[]>(
  callback: (...args: Args) => void,
  wait?: number
): Scheduled<Args>;

Usage Examples:

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

// Basic debouncing
const handleSearch = debounce((query: string) => {
  console.log("Searching for:", query);
}, 300);

handleSearch("react");
handleSearch("solid"); // Only this will execute after 300ms

// Manual cancellation
handleSearch("typescript");
handleSearch.clear(); // Cancels the pending search

Throttle

Creates a throttled callback that executes on the trailing edge at most once per interval.

/**
 * 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.
 */
function throttle<Args extends unknown[]>(
  callback: (...args: Args) => void,
  wait?: number
): Scheduled<Args>;

Usage Examples:

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

// Throttle scroll events
const handleScroll = throttle((event: Event) => {
  console.log("Scroll position:", window.scrollY);
}, 100);

window.addEventListener("scroll", handleScroll);

// Manual cancellation
handleScroll.clear();

Schedule Idle

Creates a callback throttled using requestIdleCallback() for browser idle-time execution. Falls back to throttle when requestIdleCallback is unavailable (Safari).

/**
 * Creates a callback throttled using `window.requestIdleCallback()`.
 * The throttled callback is called on trailing edge.
 * The timeout will be automatically cleared on root dispose.
 */
function scheduleIdle<Args extends unknown[]>(
  callback: (...args: Args) => void,
  maxWait?: number
): Scheduled<Args>;

Usage Examples:

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

// Schedule non-critical work during idle time
const processAnalytics = scheduleIdle((data: AnalyticsData) => {
  console.log("Processing analytics:", data);
}, 250); // Maximum 250ms wait

processAnalytics(userData);
processAnalytics.clear(); // Cancel pending work

Leading Edge Execution

Creates a scheduled callback that executes on the leading edge (immediately on first call).

/**
 * Creates a scheduled and cancellable callback that will be called on leading edge.
 * The timeout will be automatically cleared on root dispose.
 */
function leading<Args extends unknown[]>(
  schedule: ScheduleCallback,
  callback: (...args: Args) => void,
  wait?: number
): Scheduled<Args>;

Usage Examples:

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

// Leading debounce - executes immediately, then waits
const leadingDebounce = leading(debounce, (message: string) => {
  console.log("Immediate:", message);
}, 1000);

leadingDebounce("First"); // Executes immediately
leadingDebounce("Second"); // Ignored during wait period

// Leading throttle - executes immediately, then at intervals
const leadingThrottle = leading(throttle, (count: number) => {
  console.log("Count:", count);
}, 500);

Leading and Trailing Edge Execution

Creates a scheduled callback that executes on the leading edge for the first call and trailing edge for subsequent calls.

/**
 * Creates a scheduled and cancellable callback that will be called on the leading edge 
 * for the first call, and trailing edge thereafter.
 * The timeout will be automatically cleared on root dispose.
 */
function leadingAndTrailing<Args extends unknown[]>(
  schedule: ScheduleCallback,
  callback: (...args: Args) => void,
  wait?: number
): Scheduled<Args>;

Usage Examples:

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

// Executes immediately on first call, then debounced
const smartSave = leadingAndTrailing(debounce, (data: FormData) => {
  console.log("Saving:", data);
}, 2000);

smartSave(formData1); // Executes immediately (leading)
smartSave(formData2); // Waits for trailing edge
smartSave(formData3); // Waits for trailing edge (only final call executes)

Reactive Scheduling

Creates a signal for scheduling execution of solid computations by tracking.

/**
 * Creates a signal used for scheduling execution of solid computations by tracking.
 */
function createScheduled(
  schedule: (callback: VoidFunction) => VoidFunction
): Accessor<boolean>;

Usage Examples:

import { createScheduled, debounce } from "@solid-primitives/scheduled";
import { createEffect, createSignal, createMemo } from "solid-js";

// With createEffect
const debouncedSignal = createScheduled(fn => debounce(fn, 500));
const [value, setValue] = createSignal(0);

createEffect(() => {
  const currentValue = value();
  if (debouncedSignal()) {
    console.log("Debounced value:", currentValue);
  }
});

// With createMemo for transformed values
const debouncedValue = createMemo((prev: number = 0) => {
  const currentValue = value();
  return debouncedSignal() ? currentValue : prev;
});

// With different schedulers
const throttledSignal = createScheduled(fn => throttle(fn, 100));
const leadingSignal = createScheduled(fn => leading(debounce, fn, 1000));

Types

/**
 * Generic type for schedule callback functions
 */
type ScheduleCallback = <Args extends unknown[]>(
  callback: (...args: Args) => void,
  wait?: number
) => Scheduled<Args>;

/**
 * Interface for scheduled callback functions with clear method
 */
interface Scheduled<Args extends unknown[]> {
  /** The scheduled callback function */
  (...args: Args): void;
  /** Method to cancel pending timeout */
  clear: VoidFunction;
}

Server-Side Rendering

All functions provide safe server-side rendering support:

  • Return no-op functions when isServer is true
  • Maintain the same API surface for consistency
  • Prevent server-side execution of browser-only APIs

Browser Compatibility

  • requestIdleCallback: scheduleIdle gracefully falls back to throttle in browsers without support (Safari)
  • setTimeout/clearTimeout: Full support across all modern browsers
  • SolidJS Integration: Requires SolidJS 1.6.12 or higher