How to force Sequential Javascript Execution

Question

I ve only found rather complicated answers involving classes  event handlers and callbacks  which seem to me to be a somewhat sledgehammer approach   I think callbacks may be useful but I cant seem to apply these in the simplest context  See this example    lt html gt     lt head gt       lt script type  text javascript  gt        function myfunction              longfunctionfirst            shortfunctionsecond                   function longfunctionfirst             setTimeout  alert  first function finished     3000                  function shortfunctionsecond             setTimeout  alert  second function finished     200                lt  script gt     lt  head gt     lt body gt       lt a href     onclick  javascript myfunction   return false   gt Call my function lt  a gt     lt  body gt   lt  html gt    In this  the second function completes before the first function  what is the simplest way  or is there one   to force the second function to delay execution until the first function is complete   ---Edit---  So that was a rubbish example but thanks to David Hedlund I see with this new example that it is indeed synchronous  along with crashing my browser in the test process      lt html gt   lt head gt    lt script type  text javascript  gt  function myfunction         longfunctionfirst        shortfunctionsecond       function longfunctionfirst         var j   10000      for  var i 0  i lt j  i              document body innerHTML    i            alert  first function finished       function shortfunctionsecond         var j   10      for  var i 0  i lt j  i              document body innerHTML    i            alert  second function finished       lt  script gt    lt  head gt    lt body gt     lt a href     onclick  javascript myfunction   return false   gt Call my function lt  a gt   lt  body gt   lt  html gt    As my ACTUAL issue was with jQuery and IE I will have to post a separate question about that if I can t get anywhere myself

User · Answer

I am an old hand at programming and came back recently to my old passion and am struggling to fit in this Object oriented, event driven bright new world and while i see the advantages of the non sequential behavior of Javascript there are time where it really get in the way of simplicity and reusability. A simple example I have worked on was to take a photo (Mobile phone programmed in javascript, HTML, phonegap, ...), resize it and upload it on a web site. The ideal sequence is :

Take a photo
Load the photo in an img element
Resize the picture (Using Pixastic)
Upload it to a web site
Inform the user on success failure

All this would be a very simple sequential program if we would have each step returning control to the next one when it is finished, but in reality :

Take a photo is async, so the program attempt to load it in the img element before it exist
Load the photo is async so the resize picture start before the img is fully loaded
Resize is async so Upload to the web site start before the Picture is completely resized
Upload to the web site is asyn so the program continue before the photo is completely uploaded.

And btw 4 of the 5 steps involve callback functions.

My solution thus is to nest each step in the previous one and use .onload and other similar stratagems, It look something like this :

takeAPhoto(takeaphotocallback(photo) {
  photo.onload = function () {
    resizePhoto(photo, resizePhotoCallback(photo) {
      uploadPhoto(photo, uploadPhotoCallback(status) {
        informUserOnOutcome();
      });
    }); 
  };
  loadPhoto(photo);
});

(I hope I did not make too many mistakes bringing the code to it's essential the real thing is just too distracting)

This is I believe a perfect example where async is no good and sync is good, because contrary to Ui event handling we must have each step finish before the next is executed, but the code is a Russian doll construction, it is confusing and unreadable, the code reusability is difficult to achieve because of all the nesting it is simply difficult to bring to the inner function all the parameters needed without passing them to each container in turn or using evil global variables, and I would have loved that the result of all this code would give me a return code, but the first container will be finished well before the return code will be available.

Now to go back to Tom initial question, what would be the smart, easy to read, easy to reuse solution to what would have been a very simple program 15 years ago using let say C and a dumb electronic board ?

The requirement is in fact so simple that I have the impression that I must be missing a fundamental understanding of Javsascript and modern programming, Surely technology is meant to fuel productivity right ?.

Thanks for your patience

Raymond the Dinosaur ;-)

User · Answer

I am back to this questions after all this time because it took me that long to find what I think is a clean solution   The only way to force a javascript sequential execution that I know of is to use promises  There are exhaustive explications of promises at   Promises A and Promises A   The only library implementing promises I know is jquery so here is how I would solve the question using jquery promises     lt html gt   lt head gt       lt script src  http   code jquery com jquery-1 9 1 min js  gt  lt  script gt       lt script type  text javascript  gt      function myfunction                 promise   longfunctionfirst   then shortfunctionsecond             function longfunctionfirst                 d   new   Deferred            setTimeout  alert  first function finished   d resolve    3000           return d promise             function shortfunctionsecond                 d   new   Deferred            setTimeout  alert  second function finished   d resolve    200           return d promise              lt  script gt   lt  head gt   lt body gt       lt a href     onclick  javascript myfunction   return false   gt Call my function lt  a gt   lt  body gt   lt  html gt    By implementing a promise and chaining the functions with  then   you ensure that the second function will be executed only after the first one has executed It is the command d resolve   in longfunctionfirst   that give the signal to start the next function   Technically the shortfunctionsecond   does not need to create a deferred and return a promise  but I fell in love with promises and tend to implement everything with promises  sorry

User · Answer

I had the same problem  this is my solution    x000D   x000D  var functionsToCall   new Array    x000D   x000D  function f1     x000D        ajax   x000D          type  POST   x000D          url    some url   x000D          success  function data    x000D              doSomethingWith data   x000D                When done  call the next function   x000D              callAFunction  parameter    x000D            x000D          x000D    x000D   x000D  function f2     x000D              x000D      callAFunction  parameter2    x000D    x000D  function f3     x000D              x000D      callAFunction  parameter3    x000D    x000D  function f4     x000D              x000D      callAFunction  parameter4    x000D    x000D  function f5     x000D              x000D      callAFunction  parameter5    x000D    x000D  function f6     x000D              x000D      callAFunction  parameter6    x000D    x000D  function f7     x000D              x000D      callAFunction  parameter7    x000D    x000D  function f8     x000D              x000D      callAFunction  parameter8    x000D    x000D  function f9     x000D              x000D      callAFunction  parameter9    x000D    x000D       x000D  function callAllFunctionsSy params    x000D   functionsToCall push f1   x000D   functionsToCall push f2   x000D   functionsToCall push f3   x000D   functionsToCall push f4   x000D   functionsToCall push f5   x000D   functionsToCall push f6   x000D   functionsToCall push f7   x000D   functionsToCall push f8   x000D   functionsToCall push f9   x000D   functionsToCall reverse    x000D   callAFunction params   x000D    x000D   x000D  function callAFunction params    x000D   if  functionsToCall length  gt  0    x000D    var f functionsToCall pop    x000D    f params   x000D     x000D    x000D   x000D   x000D

User · Answer

I tried the callback way and could not get this to work  what you have to understand is that values are still atomic even though execution is not  For example   alert  1     lt --- these two functions will be executed at the same time  alert  2     lt --- these two functions will be executed at the same time  but doing like this will force us to know the order of execution   loop 2  total 0  for i 0 i lt loop i                 total  1             if total    loop                        alert  2               else                       alert  1

User · Answer

If you don t insist on using pure Javascript  you can build a sequential code in Livescript and it looks pretty good  You might want to take a look at this example      application do     i   3     console log td    start       lt -  lo op  - gt          console log td    hi   i           i--          lt - wait-for  something         if i is 0             return op    break         lo op       lt - sleep 1500ms      lt -  lo op  - gt          console log td    hello   i           i           if i is 3             return op    break          lt - sleep 1000ms         lo op       lt - sleep 0     console log td    heyy   do     a   8      lt -  lo op  - gt          console log td    this runs in parallel    a         a--         go  something         if a is 0             return op    break          lt - sleep 500ms         lo op    Output    0ms   start 2ms   hi 3 3ms   this runs in parallel  8 3ms   hi 2 505ms   this runs in parallel  7 505ms   hi 1 1007ms   this runs in parallel  6 1508ms   this runs in parallel  5 2009ms   this runs in parallel  4 2509ms   hello 0 2509ms   this runs in parallel  3 3010ms   this runs in parallel  2 3509ms   hello 1 3510ms   this runs in parallel  1 4511ms   hello 2 4511ms   heyy

User · Answer

In javascript  there is no way  to make the code wait  I ve had this problem and the way I did it was do a synchronous SJAX call to the server  and the server actually executes sleep or does some activity before returning and the whole time  the js waits   Eg of Sync AJAX  http   www hunlock com blogs Snippets  Synchronous AJAX

User · Answer

In your example  the first function does actually complete before the second function is started  setTimeout does not hold execution of the function until the timeout is reached  it will simply start a timer in the background and execute your alert statement after the specified time   There is no native way of doing a  sleep  in JavaScript  You could write a loop that checks for the time  but that will put a lot of strain on the client  You could also do the Synchronous AJAX call  as emacsian described  but that will put extra load on your server  Your best bet is really to avoid this  which should be simple enough for most cases once you understand how setTimeout works

User · Answer

Another way to look at this is to daisy chain from one function to another  Have an array of functions that is global to all your called functions  say   arrf    f final         f         another f         f again      Then setup an array of integers to the particular  f  s you want to run  e g  var runorder    1 3 2 0     Then call an initial function with  runorder  as a parameter  e g      f start runorder    Then at the end of each function  just pop the index to the next  f  to execute off the runorder array and execute it  still passing  runorder  as a parameter but with the array reduced by one   var nextf   runorder shift    arrf nextf  call runorder     Obviously this terminates in a function  say at index 0  that does not chain onto another function  This is completely deterministic  avoiding  timers

User · Answer

Put your code in a string  iterate  eval  setTimeout and recursion to continue with the remaining lines  No doubt I ll refine this or just throw it out if it doesn t hit the mark  My intention is to use it to simulate really  really basic user testing   The recursion and setTimeout make it sequential   Thoughts   var line pos   0  var string        console log  123        console log  line pos is    line pos   SLEEP     console log  waited        console log  line pos is    line pos   SLEEP SLEEP     console log  Did i finish         var lines   string split   n    var r   function line pos       for  i   p  i  lt  lines length  i               if lines i      SLEEP                setTimeout function   r line pos 1   1500               return                    eval  lines line pos              console log  COMPLETED READING LINES        return    console log  STARTED READING LINES    r call this line pos     OUTPUT  STARTED READING LINES 123 124 1 p is 0 undefined waited p is 5 125 Did i finish  COMPLETED READING LINES

User · Answer

Well  setTimeout  per its definition  will not hold up the thread  This is desirable  because if it did  it d freeze the entire UI for the time it was waiting  if you really need to use setTimeout  then you should be using callback functions   function myfunction         longfunctionfirst shortfunctionsecond      function longfunctionfirst callback        setTimeout function             alert  first function finished            if typeof callback     function               callback           3000       function shortfunctionsecond         setTimeout  alert  second function finished      200        If you are not using setTimeout  but are just having functions that execute for very long  and were using setTimeout to simulate that  then your functions would actually be synchronous  and you would not have this problem at all  It should be noted  though  that AJAX requests are asynchronous  and will  just as setTimeout  not hold up the UI thread until it has finished  With AJAX  as with setTimeout  you ll have to work with callbacks

[javascript] How to force Sequential Javascript Execution?

Examples related to javascript

Examples related to asynchronous

Examples related to callback

Examples related to execution

Examples related to synchronous