0

i was lookging to replace some callbacks with async and the functions are not fireing in order like they currently do using a callback

Here is example functions using callback that fire off correctly

function doSomething(callback) {
  setTimeout(function(){ console.log('FIRE OFF FIRST'); callback();}, 3000);
}

function doSomethingElse(callback) {
  setTimeout(function(){ console.log('FIRE OFF SECOND');callback();}, 1000);
}

function doThirdThing(callback) {
  setTimeout(function(){ console.log('FIRE OFF LAST');callback();; }, 100);
}

doSomething(function () {
  doSomethingElse(function () {
    doThirdThing(function () {
        console.log('ALL DONE');
    });
  });
});

Now trying to change over to async and i can't get them to all fire off , only the first promise is working

    function doSomething() {
       return new Promise(function (resolve, reject) {
         setTimeout (function(){
           console.log ('FIRE OFF FIRST');
        }, 5000);      
       }); 
    }
    function doSomethingElse() {
       return new Promise(function (resolve, reject) {
         setTimeout (function(){
           console.log ('FIRE OFF SECOND');
        }, 2000);      
       }); 
    }
    function doThirdThing() {
       return new Promise(function (resolve, reject) {
         setTimeout (function(){
           console.log ('FIRE OFF LAST');
        }, 1000);      
       }); 
    }
    
    (async () => {
      try {
        const result = await doSomething();
        const newResult = await doSomethingElse(result);
        const finalResult = await doThirdThing(newResult);
        console.log(finalResult); 
      } catch(err) {
        console.log(err);
      }
    })();

Ok to do the above correctly i needed to resolve each promise

function doSomething() {
   return new Promise(function (resolve, reject) {
     setTimeout (function(){
       console.log ('FIRE OFF FIRST');
       resolve(); 
    }, 5000);      
   }); 
}
function doSomethingElse() {
   return new Promise(function (resolve, reject) {
     setTimeout (function(){
       console.log ('FIRE OFF SECOND');
       resolve(); 
    }, 2000);      
   }); 
}
function doThirdThing() {
   return new Promise(function (resolve, reject) {
     setTimeout (function(){
       console.log ('FIRE OFF LAST');
       resolve(); 
    }, 1000);      
   }); 
}

(async () => {
  try {
    const result = await doSomething();
    const newResult = await doSomethingElse(result);
    const finalResult = await doThirdThing(newResult);
    console.log(finalResult); 
  } catch(err) {
    console.log(err);
  }
})();
MShack
  • 642
  • 1
  • 14
  • 33
  • 3
    `setTimeout` doesn't return a promise, so you cannot `await` it. Just for the record, *if it did*, you'd also need to return that promise, which you also don't do. At any rate, you can do this: [How to make a promise from setTimeout](https://stackoverflow.com/q/22707475) to be able to then `await` the calls. Also related: [using setTimeout on promise chain](https://stackoverflow.com/q/39538473) – VLAZ Feb 04 '21 at 14:35
  • 1
    Async/await works with promises. The functions you are invoking with await, must return promise. – CuriousMind Feb 04 '21 at 14:36
  • ```js function doSomething(callback) { setTimeout(function(){ console.log('FIRE OFF FIRST'); callback();}, 3000); } ``` should be replaced as ```js function doSomething(callback) { return new Promise((resolve, reject) => {setTimeout(function(){ console.log('FIRE OFF FIRST'); resolve();}, 3000); }}); ``` – CHANist Feb 04 '21 at 14:38
  • ok realworld i wouldn''t be using settimouts , but just placed to make sure function ran for a bit and completed fully before next function . So if i'm manipulating the HTML of a page and create a function to append some items , change classes. I then want to be sure to wait until that is finished before i append more html to the new classes created in the function prior. So that your saying would be fine with method that fails now using timeouts ? – MShack Feb 04 '21 at 14:42
  • Changing the DOM is not asynchronous. Are you adding some tasks that will update the DOM later? – VLAZ Feb 04 '21 at 14:45
  • yes , i'm changing the DOM , adding new classes , new html , some events , i tried to run concurrently and wouldn't work , so had to wait for each function to complete . I updated my question using promises , but only 1 promise fires off. – MShack Feb 04 '21 at 15:14
  • None of those promises gets resolved. You need to call `resolve()`, otherwise the promise will be pending forever. – VLAZ Feb 04 '21 at 15:19

0 Answers0