如何临时暂停事件排队？解决Selection操作阻塞事件循环问题

针对你批量操作Selection时触发大量selectionchange事件阻塞事件循环的问题，有几种实用的处理方式：

方法1：临时移除/替换事件监听器 #

批量操作前先保存原有的selectionchange监听器，操作期间暂时取消监听，完成后再恢复。这样能直接阻止事件被排入队列。

修改你的示例代码如下：

// 保存原监听器
const originalSelectionHandler = document.onselectionchange;
// 临时替换为空
document.onselectionchange = () => {};

const selection = getSelection();
for (let i = 0; i < 1500; i++) {
  selection.modify('extend', i%2 ? 'backward' : 'forward', 'character');
}

// 恢复原监听器
document.onselectionchange = originalSelectionHandler;
// 如果需要触发一次最终状态的事件，可手动调用
originalSelectionHandler?.();

setTimeout(() => console.log('Timeout'), 0)
console.log('SyncDone')

方法2：用标志位跳过事件处理 #

如果不想移除监听器，可以设置一个标志位，在事件回调里判断是否需要跳过处理逻辑。这种方式适合需要保留监听器但暂时忽略事件的场景：

let ignoreSelectionChange = false;

document.onselectionchange = () => {
  if (ignoreSelectionChange) return; // 跳过处理
  console.log('SC');
};

const selection = getSelection();
ignoreSelectionChange = true; // 开启忽略
for (let i = 0; i < 1500; i++) {
  selection.modify('extend', i%2 ? 'backward' : 'forward', 'character');
}
ignoreSelectionChange = false; // 关闭忽略

setTimeout(() => console.log('Timeout'), 0)
console.log('SyncDone')

补充说明 #

• 两种方法都能避免数千个事件任务排入队列，让setTimeout能更快执行，不会被阻塞。
• 如果你的场景中需要最终的Selection状态触发一次事件，记得在操作完成后手动调用监听器（方法1），或者让标志位关闭后自然触发（若后续有Selection变化，批量操作后的最终状态可能需要手动触发）。

内容的提问来源于stack exchange，提问作者Khaled