How should I call 3 functions in order to execute them one after the other

Question

If I need call this functions one after other       art1   animate   width   1000px   1000               art2   animate   width   1000px   1000               art3   animate   width   1000px   1000             I know in jQuery I could do something like       art1   animate   width   1000px   1000  linear  function            art2   animate   width   1000px   1000  linear  function                art3   animate   width   1000px   1000                                         But  let s assume that I m not using jQuery and I want to call   some 3secs function some value           some 5secs function some value           some 8secs function some value             How I should call this functions in order to execute some 3secs function  and AFTER that call ends  then execute some 5secs function and AFTER that call ends  then call some 8secs function   UPDATE   This still not working    function callback           art1   animate   width   1000px   1000       callback        function callback2           art2   animate   width   1000px   1000       callback2       function            art3   animate   width   1000px   1000          Three animations start at same time  Where is my mistake

User · Answer

You could also use promises in this way      some 3secs function this some value  then function           some 5secs function this some other value  then function              some 8secs function this some other other value                       You would have to make some value global in order to access it from inside the  then Alternatively  from the outer function you could return the value the inner function would use  like so      one some value  then function return of one          two return of one  then function return of two             three return of two                       ES6 Update Since async await is widely available now  this is the way to accomplish the same  async function run            await     art1   animate   width   1000px   1000  linear   promise       await     art2   animate   width   1000px   1000  linear   promise       await     art3   animate   width   1000px   1000  linear   promise      Which is basically  quot promisifying quot  your functions  if they re not already asynchronous   and then awaiting them

User · Answer

I use a  waitUntil  function based on javascript s setTimeout         funcCond   function to call to check whether a condition is true     readyAction   function to call when the condition was true     checkInterval   interval to poll  lt optional gt      timeout   timeout until the setTimeout should stop polling  not 100  accurate  It was accurate enough for my code  but if you need exact milliseconds  please refrain from using Date  lt optional gt      timeoutfunc   function to call on timeout  lt optional gt     function waitUntil funcCond  readyAction  checkInterval  timeout  timeoutfunc        if  checkInterval    null            checkInterval   100     checkinterval of 100ms by default           var start    new Date       use the   to convert it to a number immediatly     if  timeout    null            timeout   Number POSITIVE INFINITY     no timeout by default           var checkFunc   function             var end    new Date       rough timeout estimations by default          if  end-start  gt  timeout                if  timeoutfunc      if timeout function was defined                 timeoutfunc       call timeout function                         else               if funcCond         if condition was met                 readyAction       perform ready action function               else                   setTimeout checkFunc  checkInterval      else re-iterate                                    checkFunc       start check function initially      This would work perfectly if your functions set a certain condition to true  which you would be able to poll  Plus it comes with timeouts  which offers you alternatives in case your function failed to do something  even within time-range  Think about user feedback    eg  doSomething    waitUntil function     return doSomething value   1    doSomethingElse   waitUntil function     return doSomethingElse value   1    doSomethingUseful        Notes      Date causes rough timeout estimates  For greater precision  switch to functions such as console time    Do take note that Date offers greater cross-browser and legacy support  If you don t need exact millisecond measurements  don t bother  or  alternatively  wrap it  and offer console time   when the browser supports it

User · Answer

It sounds like you re not fully appreciating the difference between synchronous and asynchronous function execution    The code you provided in your update immediately executes each of your callback functions  which in turn immediately start an animation  The animations  however  execute asyncronously  It works like this    Perform a step in the animation Call setTimeout with a function containing the next animation step and a delay Some time passes  The callback given to setTimeout executes  Go back to step 1   This continues until the last step in the animation completes  In the meantime  your synchronous functions have long ago completed  In other words  your call to the animate function doesn t really take 3 seconds  The effect is simulated with delays and callbacks   What you need is a queue  Internally  jQuery queues the animations  only executing your callback once its corresponding animation completes  If your callback then starts another animation  the effect is that they are executed in sequence    In the simplest case this is equivalent to the following   window setTimeout function         alert              set another timeout once the first completes     window setTimeout function             alert               1000      3000      longer  but first   Here s a general asynchronous looping function  It will call the given functions in order  waiting for the specified number of seconds between each   function loop         var args   arguments      if  args length  lt   0          return       function chain i            if  i  gt   args length    typeof args i       function               return          window setTimeout function                 args i                 chain i   1              2000          0           Usage   loop    function     alert  sam          function     alert  sue          You could obviously modify this to take configurable wait times or to immediately execute the first function or to stop executing when a function in the chain returns false or to apply the functions in a specified context or whatever else you might need

User · Answer

Since you tagged it with javascript  I would go with a timer control since your function names are 3  5  and 8 seconds  So start your timer  3 seconds in  call the first  5 seconds in call the second  8 seconds in call the third  then when it s done  stop the timer   Normally in Javascript what you have is correct for the functions are running one after another  but since it looks like you re trying to do timed animation  a timer would be your best bet

User · Answer

asec 1000    setTimeout  some 3secs function  somevalue    asec 3   setTimeout  some 5secs function  somevalue    asec 5   setTimeout  some 8secs function  somevalue    asec 8     I won t go into a deep discussion of setTimeout here  but      in this case I ve added the code to execute as a string   this is the simplest way to pass a var into your setTimeout-ed function  but purists will complain  you can also pass a function name without quotes  but no variable can be passed  your code does not wait for setTimeout to trigger    This one can be hard to get your head around at first   because of the previous point  if you pass a variable from your calling function  that variable will not exist anymore by the time the timeout triggers - the calling function will have executed and it s vars gone  I have been known to use anonymous functions to get around all this  but there could well be a better way

User · Answer

This answer uses promises  a JavaScript feature of the ECMAScript 6 standard  If your target platform does not support promises  polyfill it with PromiseJs   Look at my answer here Wait till a Function with animations is finished until running another Function if you want to use jQuery animations   Here is what your code would look like with ES6 Promises and jQuery animations   Promise resolve     art1   animate    width    1000px     1000  promise    then function        return Promise resolve     art2   animate    width    1000px     1000  promise        then function        return Promise resolve     art3   animate    width    1000px     1000  promise           Normal methods can also be wrapped in Promises    new Promise function fulfill  reject         do something for 5 seconds     fulfill result      then function result       return new Promise function fulfill  reject             do something for 5 seconds         fulfill result              then function result       return new Promise function fulfill  reject             do something for 8 seconds         fulfill result              then function result         do something with the result       The then method is executed as soon as the Promise finished  Normally  the return value of the function passed to then is passed to the next one as result    But if a Promise is returned  the next then function waits until the Promise finished executing and receives the results of it  the value that is passed to fulfill

User · Answer

In Javascript  there are synchronous and asynchronous functions   Synchronous Functions  Most functions in Javascript are synchronous  If you were to call several synchronous functions in a row  doSomething    doSomethingElse    doSomethingUsefulThisTime      they will execute in order  doSomethingElse will not start until doSomething has completed  doSomethingUsefulThisTime  in turn  will not start until doSomethingElse has completed   Asynchronous Functions  Asynchronous function  however  will not wait for each other  Let us look at the same code sample we had above  this time assuming that the functions are asynchronous  doSomething    doSomethingElse    doSomethingUsefulThisTime      The functions will be initialized in order  but they will all execute roughly at the same time  You can t consistently predict which one will finish first  the one that happens to take the shortest amount of time to execute will finish first   But sometimes  you want functions that are asynchronous to execute in order  and sometimes you want functions that are synchronous to execute asynchronously  Fortunately  this is possible with callbacks and timeouts  respectively   Callbacks  Let s assume that we have three asynchronous functions that we want to execute in order  some 3secs function  some 5secs function  and some 8secs function   Since functions can be passed as arguments in Javascript  you can pass a function as a callback to execute after the function has completed   If we create the functions like this  function some 3secs function value  callback       do stuff   callback        then you can call then in order  like this   some 3secs function some value  function       some 5secs function other value  function         some 8secs function third value  function             All three functions have completed  in order                      Timeouts  In Javascript  you can tell a function to execute after a certain timeout  in milliseconds   This can  in effect  make synchronous functions behave asynchronously   If we have three synchronous functions  we can execute them asynchronously using the setTimeout function   setTimeout doSomething  10   setTimeout doSomethingElse  10   setTimeout doSomethingUsefulThisTime  10     This is  however  a bit ugly and violates the DRY principle wikipedia   We could clean this up a bit by creating a function that accepts an array of functions and a timeout    function executeAsynchronously functions  timeout      for var i   0  i  lt  functions length  i          setTimeout functions i   timeout           This can be called like so   executeAsynchronously       doSomething  doSomethingElse  doSomethingUsefulThisTime   10     In summary  if you have asynchronous functions that you want to execute syncronously  use callbacks  and if you have synchronous functions that you want to execute asynchronously  use timeouts

User · Answer

I believe the async library will provide you a very elegant way to do this  While promises and callbacks can get a little hard to juggle with  async can give neat patterns to streamline your thought process  To run functions in serial  you would need to put them in an async waterfall  In async lingo  every function is called a task that takes some arguments and a callback  which is the next function in the sequence  The basic structure would look something like   async waterfall        A list of functions   function callback            Function no  1 in sequence       callback null  arg          function arg  callback            Function no  2 in sequence       callback null              function err  results         Optional final callback will get results for all prior functions       I ve just tried to briefly explain the structure here  Read through the waterfall guide for more information  it s pretty well written

User · Answer

x000D   x000D    sample01 x000D   function      0        x000D   function       art1   animate   width   10px   100 this 1  bind this     x000D   function       art2   animate   width   10px   100 this 2  bind this     x000D   function       art3   animate   width   10px   100    x000D     x000D   x000D    sample02 x000D   function      next function         i  apply   arguments       i 0        x000D   function       art1   animate   width   10px   100 this next    x000D   function       art2   animate   width   10px   100 this next    x000D   function       art3   animate   width   10px   100    x000D      x000D   x000D    sample03 x000D   function      next function   return       i  bind         i 0        x000D   function       art1   animate   width   10px   100 this next      x000D   function       art2   animate   width   10px   100 this next      x000D   function       art3   animate   width   10px   100    x000D      x000D   x000D   x000D

User · Answer

your functions should take a callback function  that gets called when it finishes   function fone callback      do something    callback apply this          function ftwo callback      do something    callback apply this          then usage would be like   fone function      ftwo function         ftwo done

User · Answer

If method 1 has to be executed after method 2  3  4  The following code snippet can be the solution for this using Deferred object in JavaScript    x000D   x000D  function method1    x000D    var dfd   new   Deferred    x000D       setTimeout function    x000D       console log  Inside Method - 1     x000D       method2 dfd     x000D         5000   x000D    return dfd promise    x000D    x000D   x000D  function method2 dfd   x000D    setTimeout function    x000D     console log  Inside Method - 2     x000D     method3 dfd    x000D       3000   x000D    x000D   x000D  function method3 dfd   x000D    setTimeout function    x000D     console log  Inside Method - 3      x000D     dfd resolve    x000D       3000   x000D    x000D   x000D  function method4       x000D     console log  Inside Method - 4      x000D    x000D   x000D  var call   method1    x000D   x000D    when call  then function cb   x000D    method4    x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

[javascript] How should I call 3 functions in order to execute them one after the other?

ES6 Update

Examples related to javascript

Examples related to asynchronous

Examples related to callback

Examples related to closures