function createQueuer<TValue, TSelected>(
fn,
initialOptions,
selector): SolidQueuer<TValue, TSelected>
function createQueuer<TValue, TSelected>(
fn,
initialOptions,
selector): SolidQueuer<TValue, TSelected>
定义于: queuer/createQueuer.ts:101
创建一个与 Solid 兼容的 Queuer 实例,用于管理同步队列项目,并公开所有状态属性的 Solid 信号。
特性
队列按顺序同步处理项目,并在项目之间可选延迟。启动后,它将在每个 tick 处理一个项目,并在 tick 之间有一个可选的等待时间。您可以使用 stop() 和 start() 暂停和恢复处理。
默认情况下,队列使用 FIFO(先进先出)行为,但您可以通过添加或删除项目时指定位置来配置 LIFO(后进先出)或双端队列。
该 hook 使用 TanStack Store 进行响应式状态管理。selector 参数允许您指定哪些状态更改将触发重新渲染,从而通过防止不相关的状态更改时发生不必要的重新渲染来优化性能。
默认情况下,不会有任何响应式状态订阅,并且您必须通过提供 selector 函数来选择加入状态跟踪。这可以防止不必要的重新渲染,并让您完全控制组件何时更新。只有当您提供 selector 时,组件才会在选定的状态值发生变化时重新渲染。
可用的状态属性
用法示例
// Default behavior - no reactive state subscriptions
const queue = createQueuer(
(item) => {
// process item synchronously
console.log('Processing', item);
},
{
started: true, // Start processing immediately
wait: 1000, // Process one item every second
getPriority: (item) => item.priority // Process higher priority items first
}
);
// Opt-in to re-render when items or isRunning changes (optimized for UI updates)
const queue = createQueuer(
(item) => console.log('Processing', item),
{ started: true, wait: 1000 },
(state) => ({ items: state.items, isRunning: state.isRunning })
);
// Opt-in to re-render when execution metrics change (optimized for tracking progress)
const queue = createQueuer(
(item) => console.log('Processing', item),
{ started: true, wait: 1000 },
(state) => ({
executionCount: state.executionCount,
rejectionCount: state.rejectionCount
})
);
// Add items to process - they'll be handled automatically
queue.addItem('task1');
queue.addItem('task2');
// Control the scheduler
queue.stop(); // Pause processing
queue.start(); // Resume processing
// Access the selected state (will be empty object {} unless selector provided)
const { items, isRunning } = queue.state();
// Default behavior - no reactive state subscriptions
const queue = createQueuer(
(item) => {
// process item synchronously
console.log('Processing', item);
},
{
started: true, // Start processing immediately
wait: 1000, // Process one item every second
getPriority: (item) => item.priority // Process higher priority items first
}
);
// Opt-in to re-render when items or isRunning changes (optimized for UI updates)
const queue = createQueuer(
(item) => console.log('Processing', item),
{ started: true, wait: 1000 },
(state) => ({ items: state.items, isRunning: state.isRunning })
);
// Opt-in to re-render when execution metrics change (optimized for tracking progress)
const queue = createQueuer(
(item) => console.log('Processing', item),
{ started: true, wait: 1000 },
(state) => ({
executionCount: state.executionCount,
rejectionCount: state.rejectionCount
})
);
// Add items to process - they'll be handled automatically
queue.addItem('task1');
queue.addItem('task2');
// Control the scheduler
queue.stop(); // Pause processing
queue.start(); // Resume processing
// Access the selected state (will be empty object {} unless selector provided)
const { items, isRunning } = queue.state();
• TValue
• TSelected = {}
(item) => void
QueuerOptions<TValue> = {}
(state) => TSelected
SolidQueuer<TValue, TSelected>
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。