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