Javascript承诺。为什么解析在不同的地方调用时返回不同的值？
Javascript承诺。为什么解析在不同的地方调用时返回不同的值？
提问于 2022-03-26 01:52:44
const image = document.querySelector('.images');
const createImage = (imgPath, seconds) => {
return new Promise(function (resolve, reject) {
if (imgPath) {
const img = document.createElement('img');
setTimeout(() => {
img.src = imgPath;
image.append(img);
resolve(img);
}, 1000 * seconds);
} else reject('ERROR. REJECTED');
});
};
let currentImage;
createImage('./img/img-1.jpg', 1)
.then(img => {
console.log(img);
// img.style.display = 'none';
console.log('1 successful');
// img.style.display = 'none';
return createImage('./img/img-2.jpg', 2);
})
.then(img => {
console.log(img);
img.style.display = 'none';
console.log('2 successful');
return createImage('./img/img-3.jpg', 3);
})
.then(img => {
img.style.display = 'none';
console.log('3 successful');
return img;
});我正在尝试显示第一张图片，然后隐藏它以显示2秒后的第二张图片。然后，隐藏第二张图片以显示第三张图片。
当我在setTimeout函数中使用解析(Imp)时，它返回<img src="./img/img-1.jpg>。当解析(Img)放置在setTimeout之外时，它只返回<img>。为什么每种情况返回值都不同？因为在JS中，我们仍然可以使用函数内部调用的值，即使在它们被执行和消失之后。
setTimeout(() => {
img.src = imgPath;
image.append(img);
}, 1000 * seconds);
resolve(img);回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-26 02:14:29
造成这种差异的根本原因是:您是先添加src，然后再日志，还是先日志，然后设置src。在这两种情况下，浏览器都会记录在log语句中出现的元素(至少在chrome中是这样的--不同的浏览器可能记录的稍微不同)。如果元素有一个src，则日志反映了这一点。如果元素还没有src，则日志没有src。
可以在不涉及承诺的情况下证明这一点：
const img = document.createElement('img');
console.log(img);
img.src = 'example';
const img = document.createElement('img');
img.src = 'example';
console.log(img);
因此，将承诺添加回:如果在添加src之前解析承诺，代码执行将转移到.then回调并将其注销，而不需要src。一秒钟后，添加src，太晚了，无法包含在日志中。如果您等待添加src，然后解析承诺，则.then回调中的代码可以注销src。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71624739
复制相关文章
相似问题
腾讯云开发者
