Как использовать обратный вызов для анимации цепочек с помощью JavaScript

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 функции

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

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

попробуйте это, он должен работать так, как вы ожидали.

// п 3

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

    }); 
} 

// п 2

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

// п 1

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