How to execute several promises on click [duplicate]

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": google.com/search?q=javascript+chain+promises — random_user_name
– random_user_name, Commented Dec 19, 2018 at 16:46
note that your promises inside the addEventListeners will not be returned from your outer draw functions. — Jamiec
– Jamiec, Commented Dec 19, 2018 at 16:48
Really doubt that using promises is practical approach here. — charlietfl
– charlietfl, Commented Dec 19, 2018 at 16:55
@charlietfl I agree - they're not designed for repeating events, they're only good for one-shot events. — Alnitak
– Alnitak, Commented Dec 19, 2018 at 16:56

Alnitak · Accepted Answer · 2018-12-19 16:54:42Z

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.

Rubin bhandari · Accepted Answer · 2018-12-19 16:51:50Z

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);

Collectives™ on Stack Overflow

How to execute several promises on click [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related