How to execute several promises on click

Question

I'm trying to make a game using promises and call them only on mouse click (down and up), passing the state of the game from the first promise (A) to the last one (C), updating it. If promise B executes properly, promise C does not execute at all. Is it possible to chain several promises and execute them only when the event is triggered?

class A {
  static draw() {
    return new Promise((resolve) => {
      const state = {name: 'Alex'};
      resolve(state);
    })
  }
}

class B {
  static draw(state) {   
    const div = document.querySelector('.app');
    div.addEventListener('mousedown', () => {
      return new Promise((resolve) => {
      state.lastname = 'Johnson';
      console.log('state with ln ' + state)
      resolve(state);
     })
    }) 
  }
}

class C {
  static draw(state) {   
    const div = document.querySelector('.app');
    div.addEventListener('mouseup', () => {
      return new Promise((resolve) => {
      state.age = '23';
      console.log('state with age ' + state)
      resolve(state);
     })
    })
  }
}

A.draw()
  .then(res => {
  B.draw(res)
   .then(res => C.draw(res))
})

What have you researched? This is not a new problem, and there's plenty of resources out there that will help you "chain promises": https://www.google.com/search?q=javascript+chain+promises — random_user_name, Dec 19 '18 at 16:46
note that your promises inside the `addEventListeners` will ***not*** be returned from your outer `draw` functions. — Jamiec, Dec 19 '18 at 16:48
Really doubt that using promises is practical approach here. — charlietfl, Dec 19 '18 at 16:55
@charlietfl I agree - they're not designed for repeating events, they're only good for one-shot events. — Alnitak, Dec 19 '18 at 16:56

score 0 · Accepted Answer · answered Dec 19 '18 at 16:54

Your promises are back to front. They need to be created in the scope of your draw functions (and returned by those functions) and then resolved within the callbacks, e.g.:

class B {
  static draw(state) { 
    const div = document.querySelector('.app');
    return new Promise((resolve) => {
      div.addEventListener('mousedown', () => {
        state.lastname = 'Johnson';
        console.log('state with ln ' + state)
        resolve(state);
      });
    }); 
  }
}

However, such a Promise can only be resolved once, which rather begs the question as to whether promises are even the right model for what you're trying to achieve.

score -2 · Answer 2 · answered Dec 19 '18 at 16:51

Heres a quick snippet on chaining promises

var firstMethod = function() {
   var promise = new Promise(function(resolve, reject){
      setTimeout(function() {
         console.log('first method completed');
         resolve({data: '123'});
      }, 2000);
   });
   return promise;
};


var secondMethod = function(someStuff) {
   var promise = new Promise(function(resolve, reject){
      setTimeout(function() {
         console.log('second method completed');
         resolve({newData: someStuff.data + ' some more data'});
      }, 2000);
   });
   return promise;
};

var thirdMethod = function(someStuff) {
   var promise = new Promise(function(resolve, reject){
      setTimeout(function() {
         console.log('third method completed');
         resolve({result: someStuff.newData});
      }, 3000);
   });
   return promise;
};

firstMethod()
   .then(secondMethod)
   .then(thirdMethod);

How to execute several promises on click

2 Answers2