promise实现动态小球

promise框架用的是bluebird
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise animation</title>
    <style>
        .ball {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        .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>

<script>
    var ball1 = document.querySelector(".ball1");
    var ball2 = document.querySelector(".ball2");
    var ball3 = document.querySelector(".ball3");
//原生方法实现动态小球
//    function animate(ball, distance, cb) {
//        var marginLeft = parseInt(ball.style.marginLeft, 10)
//        setTimeout(function () {
//            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, 200, function() {
//            animate(ball3, 300, function () {
//                animate(ball3, 150, function () {
//                    animate(ball2, 150, function () {
//                        animate(ball1, 150, function () {
//
//                        })
//                    })
//                })
//            })
//        })
//    })

    //promise 实现动态小球
    var Promise = window.Promise;
    function promiseAnimate(ball, distance) {
        return new Promise(function(resolve) {
            function _animate() {
                var marginLeft = parseInt(ball.style.marginLeft, 10)
                setTimeout(function () {
                    if(marginLeft === distance) {
                       resolve(ball, distance)
                    }
                    else {
                        if(marginLeft < distance){
                            marginLeft ++;
                        }
                        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)
            })

</script>
</body>
</html>
promise实现动态小球

candice

引用和评论

setTimeout 和 setState 的关系
