React调度器在打印任务中的应用

背景#

在分拣管理系统中，用户可批量选择数百个订单并提交打印请求。直接将所有打印命令一次性发送至打印机会导致：

🔥 缓冲溢出：打印机硬件缓冲通常为 KB 级别，海量命令会超出容量
❌ 命令丢失或混乱：打印机无法及时处理，部分命令丢失或顺序错乱
⏸️ UI 冻结：主线程被 I/O 操作阻塞，用户交互无响应
🖨️ 设备崩溃：极端情况下打印机会重启

为此需要一个任务调度系统，将批量打印任务分片顺序执行。

概述#

基于 React Scheduler 思想实现的轻量级任务调度器，专用于打印任务的顺序执行管理。通过时间分片和异步调度，防止长任务阻塞渲染。

核心设计#

Scheduler 类结构#

1
任务队列 → 调度引擎 → 帧时间检测 → 任务执行

关键特性：

MessageChannel 优先调度：利用 MessageChannel 的微任务特性实现高效调度，无可用时降级到 setTimeout
时间分片：每批任务执行限制在 5ms 内，超时则暂停并重新调度，保持 UI 响应性
Promise 支持：任务可返回 Promise，调度器会等待异步完成后继续下一个任务
任务取消：支持按 ID 取消已队列的任务

执行流程#

1
scheduleTask() → _taskQueue.push() → _requestHostCallback()
2
                                           ↓
3
                                   MessageChannel.postMessage()
4
                                           ↓
5
                                    _flushWork() 开始处理
6
                                           ↓
7
                                      _workLoop()
8
                                      循环执行任务
9
                                      检测 5ms 超时
10
                                           ↓
11
                                    任务队列非空时重新调度

应用场景：标签打印#

打印流程#

在 useLabelPrint 中的应用：

1
// 1. 构建打印参数
2
const params = {
3
  saleOrderDetailIdList: products.map(p => p.saleOrderDetailId),
4
  isPrintItem: true,
5
  isPrintItemNew: true
6
}
7

8
// 2. 查询打印命令
9
const commands = await queryLabelPrintCommandApi(params)
10

11
// 3. 逐个调度打印任务
12
commands.forEach(command => {
13
  scheduler.scheduleTask(() => {
14
    if (bluetooth.connectedPrinterDevice?.source === 'usb') {
15
      bridge.printer.usbPrintLabel(command)
16
    } else {
17
      bridge.printer.bluetoothPrintLabel(address, command)
18
    }
19
  })
20
})

实现策略#

调度器采用 时间分片 + 消息队列 模式：

1
[100+ 打印命令] → [Scheduler] → [消息队列]
2
                            ↓
3
                        每 5ms 执行 1 条
4
                            ↓
5
                    打印机处理完成
6
                            ↓
7
                        下一条命令

优势：

✅ 打印机有充足时间处理每条命令（平均间隔 5ms）
✅ UI 线程保持响应（每 5ms 检查一次超时）
✅ 系统资源均衡利用，无峰值压力
✅ 支持中途取消任务

关键优化点#

1. 状态标志隔离#

1
_isScheduled    // 是否已请求调度
2
_isPerformingWork  // 是否正在处理任务

防止重复调度和竞态条件。

2. 自适应降级#

1
if (typeof MessageChannel !== 'undefined') {
2
  // 现代浏览器：MessageChannel 微任务调度
3
} else {
4
  // 兼容模式：setTimeout 宏任务调度
5
}

3. 错误隔离#

单个任务失败不影响队列中其他任务的执行。

性能指标#

调度延迟：< 1ms（MessageChannel）
帧内执行时间：5ms
支持队列深度：无限制
内存占用：O(n)，n 为队列任务数

总结#

Scheduler 以最小化的代码复杂度实现了 React 级别的任务调度能力，特别适合：

大量串行 I/O 操作（打印、上传等）
需要保持 UI 响应性的后台任务
设备集成场景的命令下发

核心价值在于 时间分片 + 优先级调度 + 异步支持 的有机结合。

Schduler 代码#

1
/** 调度任务接口 */
2
interface Task {
3
  /** 任务唯一标识 */
4
  id: number
5
  /** 任务执行函数，支持同步和异步 */
6
  callback: () => void | Promise<void>
7
}
8

9
/**
10
 * 任务调度器 - 基于时间分片的轻量级调度实现
11
 */
12
export default class Scheduler {
13
  /** 待执行任务队列 */
14
  private _taskQueue: Task[] = []
15
  /** 任务计数器，用于生成唯一 ID */
16
  private _taskIdCounter = 0
17
  /** 标志：是否已请求调度（防止重复调度） */
18
  private _isScheduled = false
19
  /** 标志：是否正在处理任务（防止并发执行） */
20
  private _isPerformingWork = false
21
  /** 当前执行的任务 */
22
  private _currentTask: Task | null = null
23
  /** 帧时间限制，单位 ms。每个时间分片最多执行 5ms 的任务 */
24
  private _frameDeadline = 5
25
  /** MessageChannel 实例，用于高效的微任务调度 */
26
  private _channel: MessageChannel | null = null
27
  /** 调度方式：优先级 MessageChannel > requestIdleCallback > setTimeout */
28
  private _scheduleStrategy: 'messageChannel' | 'idleCallback' | 'timeout' = 'timeout'
29

30
  /**
31
   * 初始化调度器
32
   *
33
   * 自动检测 MessageChannel、requestIdleCallback、setTimeout 可用性
34
   */
35
  constructor() {
36
    if (typeof MessageChannel !== 'undefined') {
37
      try {
38
        this._channel = new MessageChannel()
39
        // port2 接收消息时触发调度
40
        this._channel.port2.onmessage = () => {
41
          this._flushWork()
42
        }
43
        this._scheduleStrategy = 'messageChannel'
44
      } catch (e) {
45
        // MessageChannel 创建失败，降级到下一个方案
46
        console.warn('MessageChannel initialization failed, fallback to next strategy')
47
        this._channel = null
48
      }
49
    }
50

51
    // 如果 MessageChannel 不可用，检查 requestIdleCallback
52
    if (!this._channel && typeof requestIdleCallback !== 'undefined') {
53
      this._scheduleStrategy = 'idleCallback'
54
    } else if (!this._channel) {
55
      // 最终降级到 setTimeout（所有环境都支持）
56
      this._scheduleStrategy = 'timeout'
57
    }
58
  }
59

60
  /**
61
   * 添加任务到调度队列
62
   *
63
   * @param callback 任务函数
64
   * @returns 任务 ID
65
   */
66
  scheduleTask(callback: () => void | Promise<void>): number {
67
    const task: Task = {
68
      id: ++this._taskIdCounter,
69
      callback,
70
    }
71

72
    this._taskQueue.push(task)
73

74
    // 保证仅在有必要时调度
75
    if (!this._isScheduled && !this._isPerformingWork) {
76
      this._isScheduled = true
77
      this._requestHostCallback()
78
    }
79

80
    return task.id
81
  }
82

83
  /**
84
   * 取消指定的任务
85
   *
86
   * @param taskId 任务 ID
87
   * @returns 成功返回 true
88
   */
89
  cancelTask(taskId: number): boolean {
90
    const index = this._taskQueue.findIndex((task) => task.id === taskId)
91
    if (index !== -1) {
92
      this._taskQueue.splice(index, 1)
93
      return true
94
    }
95
    return false
96
  }
97

98
  /**
99
   * 请求调度回调
100
   *
101
   * 根据浏览器能力选择不同策略
102
   */
103
  private _requestHostCallback() {
104
    switch (this._scheduleStrategy) {
105
      case 'messageChannel':
106
        // MessageChannel 微任务
107
        if (this._channel) {
108
          this._channel.port1.postMessage(null)
109
        } else {
110
          // 降级到 setTimeout
111
          this._scheduleStrategy = 'timeout'
112
          setTimeout(() => this._flushWork(), 0)
113
        }
114
        break
115

116
      case 'idleCallback':
117
        // requestIdleCallback 空闲回调
118
        requestIdleCallback(() => this._flushWork(), { timeout: 1000 })
119
        break
120

121
      case 'timeout':
122
      default:
123
        // setTimeout 宏任务
124
        setTimeout(() => this._flushWork(), 0)
125
        break
126
    }
127
  }
128

129
  /**
130
   * 刷新调度队列
131
   */
132
  private async _flushWork() {
133
    // 防止并发
134
    if (this._isPerformingWork) {
135
      return
136
    }
137

138
    this._isScheduled = false
139
    this._isPerformingWork = true
140

141
    try {
142
      await this._workLoop()
143
    } catch (error) {
144
      console.error('Scheduler error:', error)
145
    } finally {
146
      this._isPerformingWork = false
147
      this._currentTask = null
148

149
      if (this._taskQueue.length > 0) {
150
        this._isScheduled = true
151
        this._requestHostCallback()
152
      }
153
    }
154
  }
155

156
  /**
157
   * 时间分片工作循环
158
   *
159
   * 每次执行后检测是否超过 5ms 时间预算
160
   */
161
  private async _workLoop() {
162
    const startTime = performance.now()
163

164
    while (this._taskQueue.length > 0) {
165
      this._currentTask = this._taskQueue.shift()!
166

167
      try {
168
        const result = this._currentTask.callback()
169

170
        // 支持异步任务
171
        if (result instanceof Promise) {
172
          await result
173
        }
174
      } catch (error) {
175
        // 单个任务失败不影响后续任务
176
        console.error(`Task ${this._currentTask.id} failed:`, error)
177
      }
178

179
      this._currentTask = null
180

181
      // 检查是否超过时间预算
182
      if (this._shouldYieldToHost(startTime)) {
183
        break
184
      }
185
    }
186
  }
187

188
  /**
189
   * 判断是否应该让出执行权
190
   *
191
   * @param startTime 时间分片的开始时间
192
   * @returns 若执行时间 >= 5ms，返回 true
193
   */
194
  private _shouldYieldToHost(startTime: number): boolean {
195
    const elapsed = performance.now() - startTime
196
    return elapsed >= this._frameDeadline
197
  }
198

199
  /**
200
   * 获取待执行任务数
201
   */
202
  getQueueLength(): number {
203
    return this._taskQueue.length
204
  }
205

206
  /**
207
   * 清空所有任务
208
   */
209
  clearQueue(): void {
210
    this._taskQueue = []
211
    this._currentTask = null
212
  }
213

214
  /**
215
   * 获取当前调度策略
216
   */
217
  getScheduleStrategy(): string {
218
    return this._scheduleStrategy
219
  }
220
}