如何在指定UI事件触发时终止for循环？

我需要在指定UI事件触发时终止for循环，之前尝试的方案表现不稳定，显然不是正确的解决办法。

在这个极简示例中，我通过在for循环的每次迭代里await setTimeout，实现了点击文档时终止循环的效果——await操作让stop变量能被设为true，从而触发循环终止。这个循环只是向控制台输出数字0，实际应用场景可能是在按键等UI事件触发时，停止向无序列表添加列表元素。

之前的实现代码：

let zeros = new Array(10000).fill(0);

(async () => {

    let stop = false;
    document.addEventListener('click', async ()=>{
        console.log('click');
        stop = true;
        await new Promise((r)=>setTimeout(r, 100)); //2
        stop = false;
    });

    for (let zero of zeros) {
        await new Promise((r)=>setTimeout(r, 100)); //1
        if (stop) {
            break;
        }
        console.log(zero);
    }
})();

问题分析 #

之前的方案依赖全局的stop变量，存在竞态问题：比如如果循环的setTimeout（标记1）和点击事件里的setTimeout（标记2）时间重叠，可能出现stop被提前重置为false，导致循环无法正确终止；而且这种方式不够规范，容易因为变量作用域或异步时序问题出现不稳定。

正确实现：使用AbortController #

用浏览器原生的AbortController API可以更可靠地处理这类异步取消场景，它专门用于终止异步操作，避免竞态问题：

let zeros = new Array(10000).fill(0);

(async () => {
    const controller = new AbortController();
    const { signal } = controller;

    // 点击文档时触发终止
    document.addEventListener('click', () => {
        console.log('click');
        controller.abort();
    });

    try {
        for (let zero of zeros) {
            // 用signal监听终止信号
            await new Promise((r, reject) => {
                const timer = setTimeout(r, 100);
                signal.addEventListener('abort', () => {
                    clearTimeout(timer);
                    reject(new Error('循环已终止'));
                });
            });
            console.log(zero);
        }
    } catch (err) {
        if (err.name === 'AbortError') {
            console.log('循环被用户终止');
        } else {
            throw err;
        }
    }
})();

方案优势 #

• 无需依赖全局变量，通过AbortSignal传递终止信号，时序更可靠
• 可以直接终止异步等待的setTimeout，避免不必要的延迟
• 符合浏览器标准API，代码可读性和可维护性更高

如果是实际场景中向无序列表添加元素，只需要把console.log(zero)换成添加元素的逻辑即可，终止逻辑完全复用。

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