如何使用回調與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

試試這個，它應該按照你的預期工作。

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