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.
Ratenbegrenzung ist ein einfacher "Hartegrenze"-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
Für sanftere Aktualisierungsmuster sollten Sie in Betracht ziehen:
Ratenbegrenzung sollte hauptsächlich verwendet werden, wenn Sie strenge Limits erzwingen müssen, wie z. B. API-Ratenlimits.
Der Hook gibt ein Tupel zurück, das enthält
Für direktere Kontrolle über Ratenbegrenzung ohne Zustandsverwaltung sollten Sie stattdessen den Low-Level-Hook createRateLimiter in Betracht ziehen.
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 Zustandseigenschaften
• TValue
• TSelected = {}
TValue
RateLimiterOptions<Setter<TValue>>
(state) => TSelected
[Accessor<TValue>, Setter<TValue>, SolidRateLimiter<Setter<TValue>, TSelected>]
// 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();
}
};
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.