让 js function 等待事件监听器

Question

这里的问题。 我有一个脚本，它在“for”循环中从 web 收集图像，然后将它们放入体内。 当脚本将 img 链接到它的源时，我引入了一个脚本来根据事件侦听器将源更改为新的。

换句话说，我想等待 go 的事件侦听器返回并完成迭代。

我正在考虑使用 globar var 在侦听器和脚本之间共享信息。

function UseNewSource(input) {  

    console.log("wait to change " + input);

    !!! wait for a listener that does not go on with the code !!!

    newSource = global_var

    return newSource
}

document.getElementById('passbtn').addEventListener('click', function () {

    console.log('clicked !!!');

    global_var = "something"

});

Answer 1

您可以使用此代码段。 每当图像准备好时，就会执行 dom 操作代码。 但它不会是连续的。 因为如果任何图像的尺寸很大，那么它会比其他图像花费更长的时间。 但我不认为这将是一个问题。 可以查看控制台日志的output。 谢谢你。

 const fetchImage = async (url) => { const img = await fetch(url).then(response => response.json()); // Do the dom operation here console.log(img); } for(let i = 1; i<=10; i++) { fetchImage(`https://jsonplaceholder.typicode.com/photos/${i}`); }