框架
版本
防抖器 API 参考
节流器 API 参考
速率限制器 API 参考
队列 API 参考
批处理器 API 参考

createQueuer

函数: createQueuer()

ts
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 信号。

特性

  • 使用提供的 fn 函数同步处理项目
  • FIFO(先进先出)或 LIFO(后进先出)队列行为
  • 通过 getPriority 或项目 priority 属性进行优先级队列处理
  • 项目过期和移除陈旧项目
  • 处理项目之间可配置的等待时间
  • 暂停/恢复处理
  • 队列状态更改、执行、拒绝和过期的回调
  • 所有状态属性(项目、计数等)都公开为 Solid 信号以实现响应性

队列按顺序同步处理项目,并在项目之间可选延迟。启动后,它将在每个 tick 处理一个项目,并在 tick 之间有一个可选的等待时间。您可以使用 stop()start() 暂停和恢复处理。

默认情况下,队列使用 FIFO(先进先出)行为,但您可以通过添加或删除项目时指定位置来配置 LIFO(后进先出)或双端队列。

状态管理和选择器

该 hook 使用 TanStack Store 进行响应式状态管理。selector 参数允许您指定哪些状态更改将触发重新渲染,从而通过防止不相关的状态更改时发生不必要的重新渲染来优化性能。

默认情况下,不会有任何响应式状态订阅,并且您必须通过提供 selector 函数来选择加入状态跟踪。这可以防止不必要的重新渲染,并让您完全控制组件何时更新。只有当您提供 selector 时,组件才会在选定的状态值发生变化时重新渲染。

可用的状态属性

  • executionCount:已处理的项目数量
  • isRunning:queuer 当前是否正在运行(未停止)
  • items:当前排队等待处理的项目数组
  • rejectionCount:被拒绝的项目数量(过期或验证失败)

用法示例

tsx
// 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 = {}

参数

fn

(item) => void

initialOptions

QueuerOptions<TValue> = {}

选择器

(state) => TSelected

Returns (返回)

SolidQueuer<TValue, TSelected>

我们的合作伙伴
Code Rabbit
Unkey
订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

无垃圾邮件。您可以随时取消订阅。

订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

无垃圾邮件。您可以随时取消订阅。