Question

我想用JavaScript和Transit.js链接三个动画。第二个必须在第一个完成后启动。为此，我尝试使用回调。

将这三个功能分开对我来说很重要。我不想窝他们。

// 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;
  });
}

我开始这样的功能：

one(two(tree()));

问题是，第二个函数在第一个函数完成之前就开始了。这个脚本有什么问题？

Answer 1

在setTimeout功能

中包装你的回调函数

＆＃13;

function one(callback) {
  $(body).transition({
      'opacity': '1'
  }, 500, function(){
    setTimeout(fucntion(){
      callback();
     console.log('callback one');
   },0);
    
  });
}    

// fn 2

function two(callback) {
 $('section').transition({
  'opacity':'1',
  }, 500, function(){
   setTimeout(fucntion(){
      callback();
     console.log('callback two');
   },0);
  });
}

// fn 3

function three(callback) {
 $('aside').transition({
  'opacity':'1',
  }, 500, function(){
   setTimeout(fucntion(){
      callback();
     console.log('callback three');
   },0);
  });
}

＆＃13;

Answer 2

您需要将函数的引用作为参数传递，而不是传递执行的结果。

// 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()));

<小时/> 使循环更好的方法是将回调添加为函数引用。

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：如果您想将其作为参数传递，则将引用作为回调函数传递，并在回调函数中调用您想要的函数。

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

试试这个，它应该按照你的预期工作。

// 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

如何使用回调来链接JavaScript动画

3 个答案: