How to use callback to chain animations with JavaScript

Question

I would like to chain three animations with JavaScript and Transit.js. The second one must be launched after the first is complete. For this I'm trying to use callbacks.

It's important for me to separate these three functions. I don't want to nest them.

// fn 1

function one(callback) {
  $(body).transition({
      'opacity': '1'
  }, 500, function(){
    callback;
   console.log('callback one');
  });
}    

// fn 2

function two(callback) {
 $('section').transition({
  'opacity':'1',
  }, 500, function(){
   console.log('callback two');
   callback;
  });
}

// fn 3

function three(callback) {
 $('aside').transition({
  'opacity':'1',
  }, 500, function(){
   console.log('callback three');
   callback;
  });
}

I start functions like this:

one(two(tree()));

The problem is, the second function starts before the first is completed. What is wrong with this script?

Answer 1

Wrap your callback function in setTimeout function

function one(callback) {
  $(body).transition({
      'opacity': '1'
  }, 500, function(){
    setTimeout(function(){
      callback();
     console.log('callback one');
   },0);
    
  });
}    

// fn 2

function two(callback) {
 $('section').transition({
  'opacity':'1',
  }, 500, function(){
   setTimeout(function(){
      callback();
     console.log('callback two');
   },0);
  });
}

// fn 3

function three(callback) {
 $('aside').transition({
  'opacity':'1',
  }, 500, function(){
   setTimeout(function(){
      callback();
     console.log('callback three');
   },0);
  });
}

Answer 2

You need to pass the reference of the function as the argument instead of passing the executed result.

// this would execute the  function `three` and pass the 
// returned value as the argumnet to function `two` 
// after executing `two` the returned value would pass to 
// function function `one` . Since any none of the function is
// returning anything the argument value would be `undefined`
one(two(tree())); 

---

The better way to make it cyclic is adding the callback as the function reference.

function one() {
  $(body).transition({
      'opacity': '1'
  }, 500, two);
}    

// fn 2

function two() {
 $('section').transition({
  'opacity':'1',
  }, 500, three);
}

// fn 3

function three() {
 $('aside').transition({
  'opacity':'1',
  // if you don't want to make it cyclic then remove the
  // callback argument `one`
  }, 500, one);
}

---

UPDATE : If you wanna pass it as an argument then pass the reference as a callback function and within the callback call the function you want.

function one(callback) {
  $(body).transition({
      'opacity': '1'
  }, 500, function(){  calback() });
  // or simply
  // }, 500, calback);
}    

// fn 2

function two(callback) {
 $('section').transition({
  'opacity':'1',
  }, 500, , function(){ calback() });
}

// fn 3

function three(callback) {
 $('aside').transition({
  'opacity':'1',
  }, 500, , function(){ calback() });
}


// use nested callbacks as you want
one(function(){ two(function(){ three(function(){}); }); })

Answer 3

try this, it should work as you expected.

// fn 3

function three() {
 $('aside').transition({
  'opacity':'1',
  }, 500, function(){
   console.log('callback three');

  });
}

// fn 2

function two() {
 $('section').transition({
  'opacity':'1',
  }, 500, three);
}

// fn 1

function one() {
  $(body).transition({
      'opacity': '1'
  }, 500, two);
}
one();//invoke fn1