How to make a promise from setTimeout

Question

This is not a realworld problem  I m just trying to understand how promises are created   I need to understand how to make a promise for a function that returns nothing  like setTimeout   Suppose I have   function async callback        setTimeout function            callback           5000      async function        console log  async called back          How do I create a promise that async can return after the setTimeout is ready to callback     I supposed wrapping it would take me somewhere   function setTimeoutReturnPromise         function promise          promise prototype then   function             console log  timed out                setTimeout function            return           2000         return promise      But I can t think beyond this

User · Answer

This is not an answer to the original question. But, as an original question is not a real-world problem it should not be a problem. I tried to explain to a friend what are promises in JavaScript and the difference between promise and callback.

Code below serves as an explanation:

//very basic callback example using setTimeout
//function a is asynchronous function
//function b used as a callback
function a (callback){
    setTimeout (function(){
       console.log ('using callback:'); 
       let mockResponseData = '{"data": "something for callback"}'; 
       if (callback){
          callback (mockResponseData);
       }
    }, 2000);

} 

function b (dataJson) {
   let dataObject = JSON.parse (dataJson);
   console.log (dataObject.data);   
}

a (b);

//rewriting above code using Promise
//function c is asynchronous function
function c () {
   return new Promise(function (resolve, reject) {
     setTimeout (function(){
       console.log ('using promise:'); 
       let mockResponseData = '{"data": "something for promise"}'; 
       resolve(mockResponseData); 
    }, 2000);      
   }); 

}

c().then (b);

JsFiddle

User · Answer

const setTimeoutAsync    cb  delay    gt    new Promise  resolve    gt        setTimeout      gt          resolve cb            delay          We can pass custom  cb fxn  like this one

User · Answer

Implementation     Promisify setTimeout const pause    ms  cb     args    gt    new Promise  resolve  reject    gt        setTimeout async      gt          try           resolve await cb      args           catch  error            reject error                 ms        Tests     Test 1 pause 1000  then      gt  console log  called       Test 2 pause 1000   a  b  c    gt   a  b  c   1  2  3  then value   gt  console log value      Test 3 pause 1000       gt      throw Error  foo      catch error   gt  console error error

User · Answer

Update  2017   Here in 2017  Promises are built into JavaScript  they were added by the ES2015 spec  polyfills are available for outdated environments like IE8-IE11   The syntax they went with uses a callback you pass into the Promise constructor  the Promise executor  which receives the functions for resolving rejecting the promise as arguments   First  since async now has a meaning in JavaScript  even though it s only a keyword in certain contexts   I m going to use later as the name of the function to avoid confusion   Basic Delay  Using native promises  or a faithful polyfill  it would look like this   function later delay        return new Promise function resolve            setTimeout resolve  delay               Note that that assumes a version of setTimeout that s compliant with the definition for browsers where setTimeout doesn t pass any arguments to the callback unless you give them after the interval  this may not be true in non-browser environments  and didn t used to be true on Firefox  but is now  it s true on Chrome and even back on IE8    Basic Delay with Value  If you want your function to optionally pass a resolution value  on any vaguely-modern browser that allows you to give extra arguments to setTimeout after the delay and then passes those to the callback when called  you can do this  current Firefox and Chrome  IE11   presumably Edge  not IE8 or IE9  no idea about IE10    function later delay  value        return new Promise function resolve            setTimeout resolve  delay  value      Note the order   delay  before  value             Or for outdated browsers that don t support doing that          setTimeout function                 resolve value              delay           Or alternately          setTimeout resolve bind null  value   delay                          If you re using ES2015  arrow functions  that can be more concise   function later delay  value        return new Promise resolve   gt  setTimeout resolve  delay  value        or even  const later    delay  value    gt      new Promise resolve   gt  setTimeout resolve  delay  value      Cancellable Delay with Value  If you want to make it possible to cancel the timeout  you can t just return a promise from later  because promises can t be cancelled   But we can easily return an object with a cancel method and an accessor for the promise  and reject the promise on cancel   const later    delay  value    gt        let timer   0      let reject   null      const promise   new Promise  resolve   reject    gt            reject    reject          timer   setTimeout resolve  delay  value               return           get promise     return promise             cancel                 if  timer                    clearTimeout timer                   timer   0                  reject                    reject   null                                      Live Example    x000D   x000D  const later    delay  value    gt    x000D      let timer   0  x000D      let reject   null  x000D      const promise   new Promise  resolve   reject    gt    x000D          reject    reject  x000D          timer   setTimeout resolve  delay  value   x000D          x000D      return   x000D          get promise     return promise     x000D          cancel     x000D              if  timer    x000D                  clearTimeout timer   x000D                  timer   0  x000D                  reject    x000D                  reject   null  x000D                x000D            x000D         x000D     x000D   x000D  const l1   later 100   l1    x000D  l1 promise x000D     then msg   gt    console log msg      x000D     catch      gt    console log  l1 cancelled        x000D   x000D  const l2   later 200   l2    x000D  l2 promise x000D     then msg   gt    console log msg      x000D     catch      gt    console log  l2 cancelled        x000D  setTimeout      gt    x000D    l2 cancel    x000D     150   x000D   x000D   x000D      Original Answer from 2014  Usually you ll have a promise library  one you write yourself  or one of the several out there   That library will usually have an object that you can create and later  resolve   and that object will have a  promise  you can get from it   Then later would tend to look something like this   function later         var p   new PromiseThingy        setTimeout function             p resolve           2000        return p promise       Note we re not returning  p  directly       In a comment on the question  I asked      Are you trying to create your own promise library    and you said     I wasn t but I guess now that s actually what I was trying to understand  That how a library would do it   To aid that understanding  here s a very very basic example  which isn t remotely Promises-A compliant  Live Copy   lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta charset utf-8   gt   lt title gt Very basic promises lt  title gt   lt  head gt   lt body gt     lt script gt       function                    Very basic promise implementation  not remotely Promises-A compliant  just a very basic example       var PromiseThingy    function                 Internal - trigger a callback         function triggerCallback callback  promise              try               callback promise resolvedValue                         catch  e                                      The internal promise constructor  we don t share this         function Promise               this callbacks                             Register a  then  callback         Promise prototype then   function callback              var thispromise   this             if   this resolved                   Not resolved yet  remember the callback             this callbacks push callback                         else                  Resolved  trigger callback right away  but always async             setTimeout function                   triggerCallback callback  thispromise                  0                         return this                         Our public constructor for PromiseThingys         function PromiseThingy               this p   new Promise                          Resolve our underlying promise         PromiseThingy prototype resolve   function value              var n             if   this p resolved                this p resolved   true              this p resolvedValue   value              for  n   0  n  lt  this p callbacks length    n                  triggerCallback this p callbacks n   this p                                                    Get our underlying promise         PromiseThingy prototype promise   function               return this p                         Export public         return PromiseThingy                             Using it        function later             var p   new PromiseThingy            setTimeout function               p resolve               2000            return p promise       Note we re not returning  p  directly                display  Start     Date now           later   then function             display  Done1     Date now              then function             display  Done2     Date now                      function display msg            var p   document createElement  p            p innerHTML   String msg           document body appendChild p                        lt  script gt   lt  body gt   lt  html gt

[javascript] How to make a promise from setTimeout

Examples related to javascript

Examples related to settimeout

Examples related to promise