1-2 先从一个牛逼闪闪的知识点 Promise 讲起-CSDN博客

对应视频地址如下：

动画时间越短越流畅，一般一秒钟为60帧，平均一帧为16.7毫秒
npm install bluebird
function方法前加下划线_代表私有函数

源码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise animation</title>
    <style type="text/css">
        .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:0px;"></div>
<div class="ball ball2" style="margin-left:0px;"></div>
<div class="ball ball3" style="margin-left:0px;"></div>

<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(window.getComputedStyle(ball, null).marginLeft, 10);
            if (marginLeft == distance) {
                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)
    //                 })
    //             })
    //         })
    //     })
    // })
    var Promise = window.Promise;
    function promiseAnimate(ball, distance) {
        return new Promise(function (resolve, reject) {
            function _animate() {
                setTimeout(function () {
                    var marginLeft = parseInt(ball.style.marginLeft, 10)
                    if (marginLeft == distance) {
                        return resolve()
                    } 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>