页面内容
- 类: Queuer<TValue>
- 类型参数
- 构造函数
- new Queuer()
- 参数
- fn
- initialOptions
- Returns (返回)
- 属性
- fn()
- 参数
- item
- Returns (返回)
- key
- options
- store
- 方法
- addItem()
- 参数
- item
- 位置
- runOnItemsChange
- Returns (返回)
- clear()
- Returns (返回)
- execute()
- 参数
- position?
- Returns (返回)
- flush()
- 参数
- numberOfItems
- position?
- Returns (返回)
- flushAsBatch()
- 参数
- batchFunction
- Returns (返回)
- getNextItem()
- 参数
- 位置
- Returns (返回)
- peekAllItems()
- Returns (返回)
- peekNextItem()
- 参数
- 位置
- Returns (返回)
- reset()
- Returns (返回)
- setOptions()
- 参数
- newOptions
- Returns (返回)
- start()
- Returns (返回)
- stop()
- Returns (返回)
排队器
类: Queuer<TValue>
定义于: queuer.ts:255
一个灵活的队列，可处理具有可配置等待时间、过期时间和优先级的项。
特性
- 自动或手动处理项
- 先进先出 (FIFO)、后进先出 (LIFO) 或双端队列行为
- 如果提供了 getPriority，则按优先级排序
- 项过期和删除陈旧项
- 队列状态更改、执行、拒绝和过期的回调
运行行为
- start(): 开始自动处理队列中的项 (默认值为 isRunning)
- stop(): 暂停处理但保留队列状态
- wait: 处理项之间的可配置延迟
- onItemsChange/onExecute: 用于监视队列状态的回调
禁用自动处理时也支持手动处理
- execute(): 使用提供的函数处理下一个项
- getNextItem(): 不处理，而是移除并返回队列中的下一个项
队列行为默认为 FIFO
- addItem(item): 添加到队列的末尾
- 从队列的前面处理项
优先级队列
- 提供一个 getPriority 函数；值越高，优先级越高
堆栈 (LIFO)
- addItem(item, 'back'): 添加到末尾
- getNextItem('back'): 从末尾移除
双端队列
- addItem(item, position): 添加到指定位置 ('front'/'back')
- getNextItem(position): 从指定位置移除
项过期
- expirationDuration: 项在队列中停留的最长时间
- getIsExpired: 覆盖默认过期的函数
- onExpire: 过期项的回调
状态管理
- 使用 TanStack Store 进行响应式状态管理
- 使用 initialState 在创建队列时提供初始状态值
- 使用 onExecute 回调来响应项执行并实现自定义逻辑
- 使用 onItemsChange 回调来响应添加到队列或从队列中移除的项目。
- 使用 onExpire 回调来响应项目过期并实现自定义逻辑。
- 使用 onReject 回调来响应队列已满时被拒绝的项目。
- 状态包括执行计数、过期计数、拒绝计数和 isRunning 状态
- 直接使用类时，可以通过 queuer.store.state 访问状态
- 使用框架适配器 (React/Solid) 时，状态从 queuer.state 访问
用法示例
// Auto-processing queue with wait time
const autoQueue = new Queuer<number>((n) => console.log(n), {
started: true, // Begin processing immediately
wait: 1000, // Wait 1s between items
onExecute: (item, queuer) => console.log(`Processed ${item}`)
});
autoQueue.addItem(1); // Will process after 1s
autoQueue.addItem(2); // Will process 1s after first item
// Manual processing queue
const manualQueue = new Queuer<number>((n) => console.log(n), {
started: false
});
manualQueue.addItem(1); // [1]
manualQueue.addItem(2); // [1, 2]
manualQueue.execute(); // logs 1, queue is [2]
manualQueue.getNextItem(); // returns 2, queue is empty
// Auto-processing queue with wait time
const autoQueue = new Queuer<number>((n) => console.log(n), {
started: true, // Begin processing immediately
wait: 1000, // Wait 1s between items
onExecute: (item, queuer) => console.log(`Processed ${item}`)
});
autoQueue.addItem(1); // Will process after 1s
autoQueue.addItem(2); // Will process 1s after first item
// Manual processing queue
const manualQueue = new Queuer<number>((n) => console.log(n), {
started: false
});
manualQueue.addItem(1); // [1]
manualQueue.addItem(2); // [1, 2]
manualQueue.execute(); // logs 1, queue is [2]
manualQueue.getNextItem(); // returns 2, queue is empty
类型参数
• TValue
构造函数
new Queuer()
new Queuer<TValue>(fn, initialOptions): Queuer<TValue>
new Queuer<TValue>(fn, initialOptions): Queuer<TValue>
定义于: queuer.ts:263
参数
fn
(item) => void
initialOptions
QueuerOptions<TValue> = {}
Returns (返回)
Queuer<TValue>
属性
fn()
fn: (item) => void;
fn: (item) => void;
定义于: queuer.ts:264
参数
item
TValue
Returns (返回)
void
key
key: string;
key: string;
定义于: queuer.ts:259
options
options: QueuerOptions<TValue>;
options: QueuerOptions<TValue>;
定义于: queuer.ts:260
store
readonly store: Store<Readonly<QueuerState<TValue>>>;
readonly store: Store<Readonly<QueuerState<TValue>>>;
定义于: queuer.ts:256
方法
addItem()
addItem(
item,
position,
runOnItemsChange): boolean
addItem(
item,
position,
runOnItemsChange): boolean
定义于: queuer.ts:384
将一个项目添加到队列。如果队列已满，该项目将被拒绝并调用 onReject。项目可以根据优先级插入，或者根据配置插入到队列的前面/后面。
如果项已添加，则返回 true，如果队列已满，则返回 false。
用法示例
queuer.addItem('task');
queuer.addItem('task2', 'front');
queuer.addItem('task');
queuer.addItem('task2', 'front');
参数
item
TValue
位置
QueuePosition = ...
runOnItemsChange
boolean = true
Returns (返回)
boolean
clear()
clear(): void
clear(): void
定义于: queuer.ts:666
从队列中移除所有待处理的项。不影响正在处理的项。
Returns (返回)
void
execute()
execute(position?): undefined | TValue
execute(position?): undefined | TValue
定义于: queuer.ts:520
从队列中移除下一个项并返回它，然后使用提供的函数处理该项。
用法示例
queuer.execute();
// LIFO
queuer.execute('back');
queuer.execute();
// LIFO
queuer.execute('back');
参数
position?
Returns (返回)
undefined | TValue
flush()
flush(numberOfItems, position?): void
flush(numberOfItems, position?): void
定义于: queuer.ts:536
处理指定数量的项，立即执行，不等待。如果未提供 numberOfItems，则将处理所有项。
参数
numberOfItems
number = ...
position?
Returns (返回)
void
flushAsBatch()
flushAsBatch(batchFunction): void
flushAsBatch(batchFunction): void
定义于: queuer.ts:551
将队列中的所有项作为批次处理，并将提供的函数作为参数。处理后，队列将被清空。
参数
batchFunction
(items) => void
Returns (返回)
void
getNextItem()
getNextItem(position): undefined | TValue
getNextItem(position): undefined | TValue
定义于: queuer.ts:468
从队列中移除下一个项并返回它，而不执行函数。用于手动队列管理。通常，使用 execute() 来处理项。
用法示例
// FIFO
queuer.getNextItem();
// LIFO
queuer.getNextItem('back');
// FIFO
queuer.getNextItem();
// LIFO
queuer.getNextItem('back');
参数
position
QueuePosition = ...
Returns (返回)
undefined | TValue
peekAllItems()
peekAllItems(): TValue[]
peekAllItems(): TValue[]
定义于: queuer.ts:634
返回队列中所有项的副本。
Returns (返回)
TValue[]
peekNextItem()
peekNextItem(position): undefined | TValue
peekNextItem(position): undefined | TValue
定义于: queuer.ts:624
返回队列中的下一个项，而不将其移除。
用法示例
queuer.peekNextItem(); // front
queuer.peekNextItem('back'); // back
queuer.peekNextItem(); // front
queuer.peekNextItem('back'); // back
参数
position
QueuePosition = 'front'
Returns (返回)
undefined | TValue
reset()
reset(): void
reset(): void
定义于: queuer.ts:674
将队列重置为其默认值
Returns (返回)
void
setOptions()
setOptions(newOptions): void
setOptions(newOptions): void
定义于: queuer.ts:300
更新队列选项。新选项将与现有选项合并。
参数
newOptions
Partial<QueuerOptions<TValue>>
Returns (返回)
void
start()
start(): void
start(): void
定义于: queuer.ts:641
启动队列中的项处理。如果已在运行，则不执行任何操作。
Returns (返回)
void
stop()
stop(): void
stop(): void
定义于: queuer.ts:651
停止队列中的项处理。不清除队列。
Returns (返回)
void
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。