讓 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}`); }