Promise初体验

想通过回调函数做一个动画效果：三个小球依次运动，第一个小球运动到指定位置后回调第二个小球运动，依次类推，效果如图所示：

到第三个小球到达指定位置再回调，让第二个小球往回移动，直到最后一个小球回到原位：

具体实现过程使用了简单的定时器，代码如下：

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还有很多特性，今天只是初步尝试一下~