想通过回调函数做一个动画效果:三个小球依次运动,第一个小球运动到指定位置后回调第二个小球运动,依次类推,效果如图所示:
到第三个小球到达指定位置再回调,让第二个小球往回移动,直到最后一个小球回到原位:
具体实现过程使用了简单的定时器,代码如下:
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
function animate(ball, distance, cb) {
setTimeout(function() {
var marginLeft = parseInt(ball.style.marginLeft, 10);
if (marginLeft === distance) {
cb && cb();
}
else {
if (marginLeft < distance) {
marginLeft ++;
}
else {
marginLeft --;
}
ball.style.marginLeft = marginLeft + 'px';
animate(ball, distance, cb)
}
},13)
}
animate(ball1, 100, function() {
animate(ball2, 100, function() {
animate(ball3, 100, function() {
animate(ball3, 0, function() {
animate(ball2, 0, function() {
animate(ball1, 0, function() {
alert(666)
})
})
})
})
})
})
看着这阶梯一般的回调函数,强迫症患者可能会很爽,但如果有成百上千的回调函数,这将会是一场灾难;
现在我们用promise重新写一下上面的函数。
首先安装bluebird,防止浏览器不兼容promise。
promise暴露在全局,可以直接var Promise = window.Promise;
重写promiseAnimate函数:
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()
}
else {
if (marginLeft < distance) {
marginLeft ++;
}
else {
marginLeft --;
}
ball.style.marginLeft = marginLeft + 'px';
_animate();
}
},13)
}
_animate();
})
}
使用promise的then方法回调:
promiseAnimate(ball1, 100)
.then(function() {
return promiseAnimate(ball2, 100)
})
.then(function() {
return promiseAnimate(ball3, 100)
})
.then(function() {
return promiseAnimate(ball3, 0)
})
.then(function() {
return promiseAnimate(ball2, 0)
})
.then(function() {
return promiseAnimate(ball1, 0)
})
使用then后,我们可以链式的回调,一目了然,简洁清晰!
当然promise还有很多特性,今天只是初步尝试一下~