编写可等待事件监听触发完成的JavaScript函数 实现图片源替换逻辑

问题根因 #

JS是单线程事件驱动的运行模型，同步执行的代码流根本做不到“中途暂停等事件触发再往下走”。之前靠全局变量传值的写法，会在UseNewSource执行的同步阶段立刻读取当时的global_var值，压根不会等后续按钮点击的回调执行，自然会出现执行顺序和预期完全错位的问题。

核心实现方法 #

要做到“每轮循环先等事件拿到值，再推进下一次迭代”，本质是把按钮点击的监听逻辑包装成可以被await的Promise，配合async/await语法，让循环在每一轮执行时临时挂起，等事件触发、拿到返回值之后再继续往下跑。

改造后的代码实现 #

1. 封装可等待的图片源获取函数

// 存储当前等待中的事件resolve方法，避免重复绑定监听
let activeResolve = null;

function UseNewSource(input) {
    console.log(`等待替换图片源：${input}`);
    // 返回Promise，挂起当前执行流直到事件触发
    return new Promise((resolve, reject) => {
        // 10秒超时兜底，避免流程永久挂起
        const timeoutTimer = setTimeout(() => {
            activeResolve = null;
            reject(new Error('等待按钮触发超时'));
        }, 10000);
        activeResolve = (newSource) => {
            clearTimeout(timeoutTimer);
            resolve(newSource);
            activeResolve = null;
        }
    })
}

2. 全局单次绑定按钮点击监听

// 初始化阶段只绑定一次监听，严禁在循环内重复绑定
document.getElementById('passbtn').addEventListener('click', function () {
    console.log('监听到按钮点击，获取到新图片源');
    // 触发当前等待中的Promise，把新源值传递给await位置
    if (activeResolve) {
        activeResolve("something");
    }
});

3. 批量采集渲染的循环主逻辑

// 主流程用async函数包裹，支持await语法
async function batchCollectImages(sourceList) {
    for (const originalSource of sourceList) {
        // 当前轮次挂起，等待按钮点击拿到替换后的新源
        const newSource = await UseNewSource(originalSource);
        // 拿到新源后再创建图片节点追加到页面
        const imgEl = document.createElement('img');
        imgEl.src = newSource;
        document.body.append(imgEl);
    }
}

关键避坑点 #

• 别在for循环每一轮里反复给按钮加click监听，不然会攒一堆旧回调，点一次按钮触发好多次逻辑，直接乱套，全局初始化的时候绑一次就够了。
• 一定要加超时兜底，万一用户忘了点按钮，整个循环就卡死在那，页面啥也干不了。
• 每次事件触发传值之后，要及时把存的resolve引用清掉，不然上一轮的回调会误触发下一轮的等待逻辑。

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