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

createRateLimitedValue

Funktion: createRateLimitedValue()

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

Definiert in: rate-limiter/createRateLimitedValue.ts:83

Ein High-Level-Solid-Hook, der eine ratenbegrenzte Version eines Wertes erstellt, der sich höchstens eine bestimmte Anzahl von Malen innerhalb eines Zeitfensters aktualisiert. Dieser Hook verwendet intern Solid's createSignal zur Verwaltung des ratenbegrenzten Zustands.

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:

  • createThrottledValue: Wenn Sie eine gleichmäßige Abfolge von Aktualisierungen wünschen (z. B. UI-Änderungen)
  • createDebouncedValue: Wenn Sie schnelle Aktualisierungen zu einer einzigen Aktualisierung zusammenfassen möchten (z. B. Suchfeld)

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

  • Eine Accessor-Funktion, die den ratenbegrenzten Wert bereitstellt
  • Die Ratenbegrenzer-Instanz mit Steuerungs-Methoden

Für eine direktere Kontrolle über das Ratenbegrenzungsverhalten ohne Solid-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 zugrundeliegende Ratenbegrenzer-Instanz. Der selector-Parameter ermöglicht es Ihnen, anzugeben, welche Zustandsänderungen des Ratenbegrenzers reaktive Aktualisierungen auslösen werden, was die Leistung optimiert, indem unnötige Abonnements bei irrelevanten Zustandsänderungen verhindert werden.

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 beginnen wird
  • 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

Accessor<TValue>

initialOptions

RateLimiterOptions<Setter<TValue>>

selector?

(state) => TSelected

Gibt zurück

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

Beispiel

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

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

// Use the rate-limited value
console.log(rateLimitedValue()); // Access the current rate-limited value

// Access rate limiter state via signals
console.log('Is at limit:', rateLimiter.state().isAtLimit);

// Control the rate limiter
rateLimiter.reset(); // Reset the rate limit window
// Default behavior - no reactive state subscriptions
const [rateLimitedValue, rateLimiter] = createRateLimitedValue(rawValue, {
  limit: 5,
  window: 60000,
  windowType: 'sliding'
});

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

// Use the rate-limited value
console.log(rateLimitedValue()); // Access the current rate-limited value

// Access rate limiter state via signals
console.log('Is at limit:', rateLimiter.state().isAtLimit);

// Control the rate limiter
rateLimiter.reset(); // Reset the rate limit window
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.