javascript - Nesting a Nested Function to Run in Sequence -

i have 3 functions want run in sequence (and repeat, i'm not on yet.) when first function displays content , leaves, second function play afterwards , same thing. repeats third function. i'm using callbacks try achieve this.

this isn't problem when i'm using 2 functions, when introduce third, renders first 2 menu boards, , third 1 comes afterwards, when should render 1, 2 , 3.

javascript reference

$(document).ready(function(){          board1 = function(callback){             $('#menu-board .board.one .row').slidedown(800).delay(10000).slideup(800, function(){                 callback();             });         }         board2 = function(callback){             $('#menu-board .board.two .row').slidedown(800).delay(10000).slideup(800, function(){                 callback();             });         }         board3 = function(){             $('#menu-board .board.three .row').slidedown(800).delay(10000).slideup(800);         }          board1(board2(board3));   }); 

any appreciated. thank you.

board1(board2(board3)); 

is equal to:

var res = board2(board3); board1(res); 

so won't act expect, start execute board2, , start board1, board3 guranteed execute after board2, while order of board1 not relevant board2 , board3.

you can use .bind create function calls board2 give param board3 like:

board1(board2.bind(null, board3));  

or wrap them in function:

board1(function() {     board2(board3); });  

however, if have many functions chain, use methods above may not idea, may create chainer want:

// function accept sequnce of functions in array, execute them in order, , call done callback when complete.  var chain = function(sequences, done) {    // manage current index, , total items called.    var idx = 0, length = sequences.length;    var caller = function() {      // when functions in sequence called, call final callback notify user      // may have check if done function or not.      if (idx === length) {        if (typeof done === 'function') {          done();        }        return;      }      // next function call.      var currenttarget = sequences[idx];      // pass caller target function, when function completes , call callback      // caller can takeover , start call next function in sequence.      currenttarget(caller);      ++idx;    };      caller();  };      // create test cases.  var sequence = [], i;  (i = 0; < 10; ++i) {      // create functions display text after 1 sec when called.      sequence[i] = (function(index) {          return function(cb) {              settimeout(function() {                  var div = document.createelement('div');                  div.innerhtml = 'index is: ' + index;                  document.body.appendchild(div);                  cb();              }, 1000);          };      }(i));  }    // demo.  chain(sequence, function() {      document.body.appendchild(document.createtextnode("all done."));  });

by chain function above, can use chain([board1, board2, board3]) , keeps codes simple if have sequence of many functions.

plus:

from .slideup()'s document:

callback function

if supplied, callback fired once animation complete. can useful stringing different animations in sequence. callback not sent arguments, set dom element being animated. if multiple elements animated, important note callback executed once per matched element, not once animation whole.

as of jquery 1.6, .promise() method can used in conjunction deferred.done() method execute single callback animation whole when matching elements have completed animations ( see example .promise() ).

so if there's more 1 element match animate, callback in current function called more once, may have rewrite function doc suggest

 board1 = function(callback){      $('#menu-board .board.one .row').slidedown(800).delay(1000).slideup(800).promise().done(callback);  } 

you can see jsfiddle work expect.