javascript - Promise.all() 和 then() 问题

Question

我在使用 Promise.all() 时遇到一些问题

我正在尝试使用这条链:

Promise.all([
    this.newContainerLoading,
    this.gsapAnim()
])
.then(
    Promise.all([
        this.fadeOut.bind(this),
        this.preload.bind(this)
    ])  
)
.then(this.fadeIn.bind(this))

但出于某种原因，第二个 Promise.all() 中的两个函数甚至都没有被调用？例如 fadeOut() 和 preload() 似乎根本没有被调用，链只是跳到最后的 then() 并执行fadeIn()

关于我做错了什么有什么想法吗？

Answer 1

您需要将 fadeOut 和 preload 包装在一个函数中，以便在 .all 解析时调用它们，否则将立即调用它们。

下面的代码显示了一种正确的方法

function newContainerLoading() {
  return new Promise((res) => {
    setTimeout(() => {
      console.log('newContainerLoading');
      res()
    }, 1000)
   })
 }

function gsapAnim() {
  return new Promise((res) => {
    setTimeout(() => {
      console.log('gsapAnim');
      res()
    }, 1000)
   }) 
}

function fadeOut() {
    return new Promise((res) => {
    setTimeout(() => {
      console.log('fadeOut');
      res()
    }, 1000)
   })
}

function preload() {
  return new Promise((res) => {
    setTimeout(() => {
      console.log('preload');
      res()
    }, 1000)
   })  
}


function fadeIn() {
 console.log('fadeIn')
}


Promise.all([
    newContainerLoading(),
    gsapAnim()
])
.then(()=> 
    Promise.all([
        fadeOut(),
        preload()
    ])  
)
.then(fadeIn)