Proper way to wait for one function to finish before continuing

Question

I have two JS functions  One calls the other  Within the calling function  I d like to call the other  wait for that function to finish  then continue on  So  for example pseudo code   function firstFunction        for i 0 i lt x i                do something           function secondFunction        firstFunction          now wait for firstFunction to finish           do something else      I came up with this solution  but don t know if this is a smart way to go about it   var isPaused   false   function firstFunction        isPaused   true      for i 0 i lt x i                do something           isPaused   false      function secondFunction        firstFunction       function waitForIt            if  isPaused                setTimeout function   waitForIt    100             else                  go do that thing                       Is that legit  Is there a more elegant way to handle it  Perhaps with jQuery

User · Answer

An elegant way to wait for one function to complete first is to use Promises with async/await function.

Firstly, create a Promise. The function I created will be completed after 2s. I used setTimeout in order to demonstrate the situation where the instructions would take some time to execute.
For the second function, you can use async/await function where you will await for the first function to complete before proceeding with the instructions.

Example:

_x000D_

    //1. Create a new function that returns a promise
    function firstFunction() {
      return new Promise((resolve, reject) => {
          let y = 0
          setTimeout(() => {
            for(i=0; i<10; i++){
               y++
            }
             console.log('loop completed')  
             resolve(y)
          }, 2000)
      })
    }
    
    //2. Create an async function
    async function secondFunction() {
        console.log('before promise call')
        //3. Await for the first function to complete
        let result = await firstFunction()
        console.log('promise resolved: ' + result)
        console.log('next step')
    }; 

    secondFunction()

_x000D_

Note:

You could simply resolve the Promise without any value like so resolve(). In my example, I resolved the Promise with the value of y that I can then use in the second function.

User · Answer

The only issue with promises is that IE doesn t support them  Edge does  but there s plenty of IE 10 and 11 out there  https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Promise  compatibility at the bottom   So  JavaScript is single-threaded  If you re not making an asynchronous call  it will behave predictably  The main JavaScript thread will execute one function completely before executing the next one  in the order they appear in the code   Guaranteeing order for synchronous functions is trivial - each function will execute completely in the order it was called    Think of the synchronous function as an atomic unit of work  The main JavaScript thread will execute it fully  in the order the statements appear in the code   But  throw in the asynchronous call  as in the following situation   showLoadingDiv       function 1  makeAjaxCall       function 2 - contains async ajax call  hideLoadingDiv       function 3   This doesn t do what you want  It instantaneously executes function 1  function 2  and function 3  Loading div flashes and it s gone  while the ajax call is not nearly complete  even though makeAjaxCall   has returned  THE COMPLICATION is that makeAjaxCall   has broken its work up into chunks which are advanced little by little by each spin of the main JavaScript thread - it s behaving asychronously  But that same main thread  during one spin run  executed the synchronous portions quickly and predictably   So  the way I handled it  Like I said the function is the atomic unit of work  I combined the code of function 1 and 2 - I put the code of function 1 in function 2  before the asynch call  I got rid of function 1  Everything up to and including the asynchronous call executes predictably  in order   THEN  when the asynchronous call completes  after several spins of the main JavaScript thread  have it call function 3  This guarantees the order  For example  with ajax  the onreadystatechange event handler is called multiple times  When it reports it s completed  then call the final function you want    I agree it s messier  I like having code be symmetric  I like having functions do one thing  or close to it   and I don t like having the ajax call in any way be responsible for the display  creating a dependency on the caller   BUT  with an asynchronous call embedded in a synchronous function  compromises have to be made in order to guarantee order of execution  And I have to code for IE 10 so no promises   Summary  For synchronous calls  guaranteeing order is trivial  Each function executes fully in the order it was called  For a function with an asynchronous call  the only way to guarantee order is to monitor when the async call completes  and call the third function when that state is detected   For a discussion of JavaScript threads  see  https   medium com  francesco rizzi javascript-main-thread-dissected-43c85fce7e23 and https   developer mozilla org en-US docs Web JavaScript EventLoop  Also  another similar  highly rated question on this subject  How should I call 3 functions in order to execute them one after the other

User · Answer

It appears you re missing an important point here  JavaScript is a single-threaded execution environment  Let s look again at your code  note I ve added alert  Here     var isPaused   false   function firstFunction        isPaused   true      for i 0 i lt x i                do something           isPaused   false      function secondFunction        firstFunction        alert  Here         function waitForIt            if  isPaused                setTimeout function   waitForIt    100             else                  go do that thing                       You don t have to wait for isPaused  When you see the  Here  alert  isPaused will be false already  and firstFunction will have returned  That s because you cannot  yield  from inside the for loop     do something   the loop may not be interrupted and will have to fully complete first  more details  Javascript thread-handling and race-conditions    That said  you still can make the code flow inside firstFunction to be asynchronous and use either callback or promise to notify the caller  You d have to give up upon for loop and simulate it with if instead  JSFiddle     function firstFunction         var deferred     Deferred         var i   0      var nextStep   function             if  i lt 10                   Do something             printOutput  Step      i               i                setTimeout nextStep  500                      else               deferred resolve i                       nextStep        return deferred promise       function secondFunction         var promise   firstFunction        promise then function result             printOutput  Result      result               On a side note  JavaScript 1 7 has introduced yield keyword as a part of generators  That will allow to  punch  asynchronous holes in otherwise synchronous JavaScript code flow  more details and an example   However  the browser support for generators is currently limited to Firefox and Chrome  AFAIK

User · Answer

This what I came up with  since I need to run several operations in a chain    lt button onclick  tprom  Hello Niclas    gt test promise lt  button gt    lt script gt      function tprom mess            console clear             var promise   new Promise function  resolve  reject                setTimeout function                      resolve mess                  2000                        var promise2   new Promise async function  resolve  reject                await promise              setTimeout function                      resolve mess         mess                  2000                        var promise3   new Promise async function  resolve  reject                await promise2              setTimeout function                      resolve mess         mess        mess                  2000                        promise then function  data                console log data                        promise2 then function  data                console log data                        promise3 then function  data                console log data                       lt  script gt

User · Answer

Your main fun will call firstFun then on complete of it your next fun will call   async firstFunction                 const promise   new Promise  resolve  reject    gt                    for  let i   0  i  lt  5  i                             do something                     console log i                       if  i    4                            resolve i                                                                       const result   await promise                     second                 this firstFunction   then  res   gt                       third function call do something                 console log  Gajender here

User · Answer

I wonder why no one have mentioned this simple pattern     function next        do something   next     function         do some more      Using timeouts just for blindly waiting is bad practice  and involving promises just adds more complexity to the code  In OP s case   function next      for i 0 i lt x i            do something     if  i  x-1  next         function          now wait for firstFunction to finish         do something else      a small demo - gt  http   jsfiddle net 5jdeb93r

User · Answer

Use async await    async function firstFunction      for i 0 i lt x i            do something       return       then use await in your other function to wait for it to return   async function secondFunction      await firstFunction         now wait for firstFunction to finish         do something else

User · Answer

One way to deal with asynchronous work like this is to use a callback function  eg   function firstFunction  callback          do some asynchronous work        and when the asynchronous stuff is complete      callback           function secondFunction           call first function and pass in a callback function which        first function runs when it has completed     firstFunction function             console log  huzzah  I  m done                       As per  Janaka Pushpakumara s suggestion  you can now use arrow functions to achieve the same thing  For example   firstFunction      gt  console log  huzzah  I  m done        Update  I answered this quite some time ago  and really want to update it  While callbacks are absolutely fine  in my experience they tend to result in code that is more difficult to read and maintain  There are situations where I still use them though  such as to pass in progress events and the like as parameters  This update is just to emphasise alternatives   Also the original question doesn t specificallty mention async  so in case anyone is confused  if your function is synchronous  it will block when called  For example   doSomething      the function below will wait until doSomething completes if it is synchronous doSomethingElse     If though as implied the function is asynchronous  the way I tend to deal with all my asynchronous work today is with async await  For example   const secondFunction   async      gt      const result   await firstFunction        do something else here after firstFunction completes     IMO  async await makes your code much more readable than using promises directly  most of the time   If you need to handle catching errors then use it with try catch  Read about it more here  https   developer mozilla org en-US docs Web JavaScript Reference Statements async function

[javascript] Proper way to wait for one function to finish before continuing?

Examples related to javascript

Examples related to jquery

Examples related to delay

Examples related to pausing-execution