首先看下面这段动画的原始的callback写法:
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
function animate(ball, distance, callback){
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft, 10)
if (marginLeft === distance) {
callback && callback()
}
else {
if (marginLeft < distance) {
marginLeft = marginLeft + 2
} else {
marginLeft --
}
ball.style.marginLeft = marginLeft + 'px'
animate(ball, distance, callback)
}
}, 13)
}
animate(ball1, 100, function(){
animate(ball2, 200, function(){
animate(ball3, 300, function(){
animate(ball3, 150, function(){
animate(ball2, 150, function(){
animate(ball1, 150, function(){
//结束
})
})
})
})
})
})
改为promise写法为:
首先要按装bluebird依赖 npm install bluebird
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
var Promise = window.Promise
function promiseAnimate(ball, distance){
return new Promise(function(resolve, reject){
function _animate(){
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft, 10)
if (marginLeft === distance) {
resolve && resolve ()
}
else {
if (marginLeft < distance) {
marginLeft = marginLeft + 3
} else {
marginLeft --
}
ball.style.marginLeft = marginLeft + 'px'
_animate()
}
}, 13)
}
_animate()
})
}
promiseAnimate(ball1, 100)
.then(function(){
return promiseAnimate(ball2, 200)
})
.then(function(){
return promiseAnimate(ball3, 300)
})
.then(function(){
return promiseAnimate(ball3, 150)
})
.then(function(){
return promiseAnimate(ball2, 150)
})
.then(function(){
return promiseAnimate(ball1, 150)
})