createRateLimitedValue
函数：createRateLimitedValue()
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>]
定义于：rate-limiter/createRateLimitedValue.ts:83
一个高级 Solid hook，用于创建一个值的限速版本，该值在时间窗口内最多更新一定次数。此 hook 在内部使用 Solid 的 createSignal 来管理限速状态。
限速是一种简单的“硬限制”方法——它允许所有更新直到达到限制，然后阻止后续更新直到窗口重置。与节流或防抖不同，它不尝试间隔或智能地合并更新。这可能导致快速更新的爆发，然后是无更新的时期。
速率限制器支持两种类型的窗口
- 'fixed': 一个严格的窗口，在窗口期结束后重置。窗口内的所有更新都计入限制，并且窗口在期结束后完全重置。
- 'sliding': 一个滚动窗口，允许在旧更新到期时进行更新。这提供了更一致的更新速率。
为了更平滑的更新模式，请考虑使用
- createThrottledValue：当您希望更新之间保持一致的间隔时（例如 UI 更改）
- createDebouncedValue：当您想将快速更新合并为一次更新时（例如搜索输入）
速率限制主要用于需要强制执行严格限制的情况，例如 API 速率限制。
该 hook 返回一个元组，包含：
- 提供限速值的访问函数
- 具有控制方法的限速器实例
为了在不使用 Solid 状态管理的情况下更直接地控制限速行为，请考虑使用更底层的 createRateLimiter hook。
状态管理和选择器
该 hook 使用 TanStack Store 通过底层限速器实例进行响应式状态管理。selector 参数允许您指定哪些限速器状态更改将触发响应式更新，通过防止不必要的订阅来优化性能（当不相关的状态发生更改时）。
默认情况下，不会有响应式状态订阅，您必须通过提供选择器函数来选择加入状态跟踪。这可以防止不必要的响应式更新，并让您完全控制组件何时订阅状态更改。只有当您提供选择器时，响应式系统才会跟踪选定的状态值。
可用的速率限制器状态属性
- callsInWindow：当前窗口中进行的调用次数
- remainingInWindow：当前窗口中剩余的调用次数
- windowStart：当前窗口开始的 Unix 时间戳
- nextWindowStart：下一个窗口将开始的 Unix 时间戳
- msUntilNextWindow：到下一个窗口开始的毫秒数
- isAtLimit：当前窗口的调用限制是否已达到
- status：当前状态 ('disabled' | 'idle' | 'at-limit')
类型参数
• TValue
• TSelected = {}
参数
value
Accessor<TValue>
initialOptions
RateLimiterOptions<Setter<TValue>>
选择器?
(state) => TSelected
Returns (返回)
[Accessor<TValue>, SolidRateLimiter<Setter<TValue>, TSelected>]
示例
// 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
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。