Framework
Version
Debouncer API Referenz
Throttler API Referenz
Rate Limiter API Referenz
Queue API Referenz
Batcher API Referenz

createRateLimitedSignal

Funktion: createRateLimitedSignal()

ts
function createRateLimitedSignal<TValue, TSelected>(
   value, 
   initialOptions, 
   selector?): [Accessor<TValue>, Setter<TValue>, SolidRateLimiter<Setter<TValue>, TSelected>]
function createRateLimitedSignal<TValue, TSelected>(
   value, 
   initialOptions, 
   selector?): [Accessor<TValue>, Setter<TValue>, SolidRateLimiter<Setter<TValue>, TSelected>]

Definiert in: rate-limiter/createRateLimitedSignal.ts:95

Ein Solid Hook, der einen ratenlimitierten Zustands-Wert erstellt, der eine harte Grenze für Zustandsaktualisierungen innerhalb eines Zeitfensters erzwingt. Dieser Hook kombiniert Solid's createSignal mit Ratenbegrenzungsfunktionalität, um kontrollierte Zustandsaktualisierungen zu ermöglichen.

Raten­begrenzung ist ein einfacher "Harte­grenze"-Ansatz – sie erlaubt alle Aktualisierungen, bis das Limit erreicht ist, und blockiert dann nachfolgende Aktualisierungen, bis das Fenster zurückgesetzt wird. Im Gegensatz zu Throttling oder Debouncing versucht sie nicht, Aktualisierungen zu verteilen oder intelligent zusammenzufassen. Dies kann zu Schüben schneller Aktualisierungen führen, gefolgt von Perioden ohne Aktualisierungen.

Der Ratenbegrenzer unterstützt zwei Arten von Fenstern

  • 'fixed': Ein strenges Fenster, das nach der Fenster­periode zurückgesetzt wird. Alle Aktualisierungen innerhalb des Fensters zählen für das Limit, und das Fenster wird nach der Periode vollständig zurückgesetzt.
  • 'sliding': Ein rollierendes Fenster, das Aktualisierungen zulässt, wenn alte ablaufen. Dies sorgt für eine konsistentere Rate von Aktualisierungen im Laufe der Zeit.

Für sanftere Aktualisierungs­muster sollten Sie in Betracht ziehen:

  • createThrottledSignal: Wenn Sie konsistente Abstände zwischen Updates wünschen (z. B. UI-Änderungen)
  • createDebouncedSignal: Wenn Sie schnelle Updates zu einer einzigen Aktualisierung zusammenfassen möchten (z. B. Such-Input)

Raten­begrenzung sollte hauptsächlich verwendet werden, wenn Sie strenge Limits erzwingen müssen, wie z. B. API-Raten­limits.

Der Hook gibt ein Tupel zurück, das enthält

  • Der Zugriffsmechanismus für den ratenlimitierten Zustands-Wert
  • Eine ratenbegrenzte Setter-Funktion, die die konfigurierten Limits einhält
  • Die RateLimiter-Instanz für zusätzliche Kontrolle

Für direktere Kontrolle über Ratenbegrenzung ohne Zustandsverwaltung sollten Sie stattdessen den Low-Level-Hook createRateLimiter in Betracht ziehen.

Zustandsverwaltung und Selektor

Der Hook verwendet TanStack Store für reaktives Zustandsmanagement über die zugrunde liegende RateLimiter-Instanz. Der Parameter selector ermöglicht es Ihnen, anzugeben, welche Zustandsänderungen des RateLimiters reaktive Updates auslösen werden, was die Leistung optimiert, indem unnötige Abonnements verhindert werden, wenn irrelevante Zustandsänderungen auftreten.

Standardmäßig werden keine reaktiven Zustandsabonnements durchgeführt. Sie müssen die Zustandsverfolgung durch Angabe einer Selector-Funktion aktivieren. Dies verhindert unnötige reaktive Updates und gibt Ihnen die volle Kontrolle darüber, wann Ihre Komponente Zustandsänderungen abonniert. Nur wenn Sie einen Selector angeben, verfolgt das reaktive System die ausgewählten Zustandswerte.

Verfügbare ratenbegrenzte Zustands­eigenschaften

  • callsInWindow: Anzahl der Aufrufe im aktuellen Fenster
  • remainingInWindow: Anzahl der verbleibenden Aufrufe im aktuellen Fenster
  • windowStart: Unix-Zeitstempel, wann das aktuelle Fenster begonnen hat
  • nextWindowStart: Unix-Zeitstempel, wann das nächste Fenster beginnt
  • msUntilNextWindow: Millisekunden bis zum Beginn des nächsten Fensters
  • isAtLimit: Ob das Aufruflimit für das aktuelle Fenster erreicht wurde
  • status: Aktueller Status ('disabled' | 'idle' | 'at-limit')

Typparameter

TValue

TSelected = {}

Parameter

value

TValue

initialOptions

RateLimiterOptions<Setter<TValue>>

selector?

(state) => TSelected

Gibt zurück

[Accessor<TValue>, Setter<TValue>, SolidRateLimiter<Setter<TValue>, TSelected>]

Beispiel

tsx
// Default behavior - no reactive state subscriptions
const [value, setValue, rateLimiter] = createRateLimitedSignal(0, {
  limit: 5,
  window: 60000,
  windowType: 'sliding'
});

// Opt-in to reactive updates when limit state changes (optimized for UI feedback)
const [value, setValue, rateLimiter] = createRateLimitedSignal(
  0,
  { limit: 5, window: 60000 },
  (state) => ({ isAtLimit: state.isAtLimit, remainingInWindow: state.remainingInWindow })
);

// With rejection callback and fixed window
const [value, setValue] = createRateLimitedSignal(0, {
  limit: 3,
  window: 5000,
  windowType: 'fixed',
  onReject: (rateLimiter) => {
    alert(`Rate limit reached. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
  }
});

// Access rateLimiter state via signals
const handleSubmit = () => {
  const remaining = rateLimiter.state().remainingInWindow;
  if (remaining > 0) {
    setValue(newValue);
  } else {
    showRateLimitWarning();
  }
};
// Default behavior - no reactive state subscriptions
const [value, setValue, rateLimiter] = createRateLimitedSignal(0, {
  limit: 5,
  window: 60000,
  windowType: 'sliding'
});

// Opt-in to reactive updates when limit state changes (optimized for UI feedback)
const [value, setValue, rateLimiter] = createRateLimitedSignal(
  0,
  { limit: 5, window: 60000 },
  (state) => ({ isAtLimit: state.isAtLimit, remainingInWindow: state.remainingInWindow })
);

// With rejection callback and fixed window
const [value, setValue] = createRateLimitedSignal(0, {
  limit: 3,
  window: 5000,
  windowType: 'fixed',
  onReject: (rateLimiter) => {
    alert(`Rate limit reached. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
  }
});

// Access rateLimiter state via signals
const handleSubmit = () => {
  const remaining = rateLimiter.state().remainingInWindow;
  if (remaining > 0) {
    setValue(newValue);
  } else {
    showRateLimitWarning();
  }
};
Unsere Partner
Code Rabbit
Unkey
Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.

Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.