Javascript 承诺。为什么在不同地方调用时resolve return 值不同？

Question

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 函数中使用 resolve(imp) 时，它 returns <img src="./img/img-1.jpg>。当 resolve(img) 被放置在 setTimeout 之外时，它 return 只是 <img>。为什么每个案例 return 值不同？因为在 JS 中，我们仍然可以使用在函数内部调用的值，即使它们被执行并消失了。

  setTimeout(() => {
    img.src = imgPath;
    image.append(img);
  }, 1000 * seconds);
  resolve(img);

Answer 1

根本原因在于：是先添加src再登录，还是先登录再设置src。在这两种情况下，浏览器都会记录出现在日志语句时的元素（至少在 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.

Javascript 承诺。为什么在不同地方调用时resolve return 值不同？

Javascript promise. Why does resolve return different values when it's called in different places?

javascript

scope

resolve

promise

reactjs