gpt4 book ai didi

javascript - 如何同步上传图片?

转载 作者:行者123 更新时间:2023-12-02 23:38:49 25 4
gpt4 key购买 nike

我尝试延迟显示图像,直到所有图像都上传(在浏览器中),但我的代码继续运行(不等待上传)。

我正在使用 Promise 和 async-await。这是我的代码:

async _renderPhotos(data){
console.log("step6.1");
const photoSetDiv = document.createElement("div");
photoSetDiv.classList.add("photoSet");
// photoSetDiv.classList.add("unvisible");
photoSetDiv.id=`photoSet${this._step}`;
const urlArray=data.map( image => image.url);

await this._uploadAllImages(data, photoSetDiv);
console.log("step6.3");
this._container.appendChild(photoSetDiv);

}

_uploadAllImages(array, container){
var index=0;

//upload each of the images is separate promise
function checkImage(item){new Promise ((resolve, reject) =>{

//Creating <figure>, <img> and <div>.
const figure = document.createElement("figure");
figure.classList.add(item.site);
const title = document.createElement("div");
title.classList.add("titleImage");
title.innerHTML =`#${item.site}`;
figure.appendChild(title);
const img = new Image();
img.classList.add("image");

img.onload=() => {
console.log("step 6.2");
const classCSS=figureClass(index);
figure.classList.add(classCSS);
figure.appendChild(img);
container.appendChild(figure);
index ++;
resolve(item)}

img.src=item.url;
// Event on the image: after clicking on the image it is erlarged
img.onclick= () => {
modal.style.display = "block";
modalImg.src=item.url;
};
})};

return Promise.all(array.map(checkImage));
}

我想等待上传图片。相等的:按以下顺序在控制台中显示:步骤6.1步骤6.2(很多次,因为图像很多)步骤6.3

最佳答案

await 的陷阱之一和Promise.all/race也就是说,您可以在非 promise 上使用它们,这只会评估值本身。所以这个:

  await undefined;
await Promise.all([ undefined, undefined ]);

将直接运行,不会发出任何警告(好吧,不完全是,它会等待两个微滴答)。

这就是你的情况发生的情况。你不是return兑现您从checkImage创建的 promise ,因此你基本上打电话 Promise.allundefined 的数组上s。

关于javascript - 如何同步上传图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56174018/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com