Im having some issues with Promise.all()

Im trying to use this chain:

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

But for some reason the 2 functions in the second Promise.all() are not even being called? Eg fadeOut() and preload() dont appear to be called at all, and the chain just skips to the final then() and does the fadeIn()

Any ideas as to what Im doing wrong?

Im having some issues with Promise.all()

Im trying to use this chain:

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

But for some reason the 2 functions in the second Promise.all() are not even being called? Eg fadeOut() and preload() dont appear to be called at all, and the chain just skips to the final then() and does the fadeIn()

Any ideas as to what Im doing wrong?

• javascript
• ecmascript-6
• promise
• es6-promise

3 Answers 3

You need to wrap fadeOut and preload in a function so they get called when .all resolved, otherwise they will be called immediately.

Below code shows one correct way to do it

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)

bind is used incorrectly here. The result of .bind(this) is bound function. It is not being called, unless it is called explicitly like this.fadeOut.bind(this)().

The purpose of using bind with promises is to use bound functions as callbacks. Promise.all doesn't accept callbacks, but then does. And Promise.all returns a promise, so it has to be wrapped with arrow function. It should be:

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

You should declare the then section in the inner promise and use a variable to store the parent this, see following please:

var self = this;

var newContainerLoading = "dummy";
function gsapAnim(){
  console.log("gsapAnim");
  return "gsapAnim";
}
function fadeOut(){
  console.log("fadeOut");
  return "fadeOut";
}
function preload(){
  console.log("preload");
  return "preload";
}
function fadeIn(){
  console.log("fadeIn");
  return "fadeIn";
}

Promise.all([
    this.newContainerLoading,
    this.gsapAnim()
])
.then(values => {
      Promise.all([
          self.fadeOut(),
          self.preload()
      ]).then(values => {console.log(values)})
   }
)
.then(self.fadeIn.bind(self))

If you want to keep the chain, you should call the last Promise when the first is pleted, see following:

var self = this;

var newContainerLoading = "dummy";
function gsapAnim(){
  console.log("gsapAnim");
  return "gsapAnim";
}
function fadeOut(){
  console.log("fadeOut");
  return "fadeOut";
}
function preload(){
  console.log("preload");
  return "preload";
}
function fadeIn(){
  console.log("fadeIn");
  return "fadeIn";
}

Promise.all([
    this.newContainerLoading,
    this.gsapAnim()
])
.then(values => {
      Promise.all([
          self.fadeOut(),
          self.preload()
      ]).then(self.fadeIn.bind(self))
   }
)