Bluebird + Promise 实现动画

写在前面：

安装bluebird模块
在view.html所在目录下打开终端（命令行），执行
npm install bluebird
用<script>标签引入bluebird.js
Promise的写法很好解决了“回调地狱”的问题
Code：

// view.html
<!DOCTYPE>
<html>
    <title>Promisee animation</title>

    <head>
        <style>
            .ball {
                width: 40px;
                height: 40px;
                border-radius: 20px;
            }
            
            .ball1 {
                background-color: red;
            }
            
            .ball2 {
                background-color: yellow;
            }
            
            .ball3 {
                background-color: green;
            }
        </style>
        <script src="./node_modules/bluebird/js/browser/bluebird.js"></script>
    </head>

    <body>
        <div class="ball ball1" style="margin-left: 0;"></div>
        <div class="ball ball2" style="margin-left: 0;"></div>
        <div class="ball ball3" style="margin-left: 0;"></div>
    </body>
    <script type="text/javascript">
        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++;
                    } 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() {
        //                      //
        //                  })
        //              })
        //          })
        //      })
        //  })
        // });

        var Promise = window.Promise;

        function pomiseAnimate(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();
            })
        }

        pomiseAnimate(ball1, 100)
            .then(function() {
                return pomiseAnimate(ball2, 200)
            })
            .then(function() {
                return pomiseAnimate(ball3, 300)
            })
            .then(function() {
                return pomiseAnimate(ball3, 150)
            })
            .then(function() {
                return pomiseAnimate(ball2, 150)
            })
            .then(function() {
                return pomiseAnimate(ball1, 150)
            });
    </script>

</html>
Bluebird + Promise 实现动画

写在前面：

Code：

推荐阅读更多精彩内容
