10慕课网《进击Node.js基础》初识promise

Posted 言凡

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了10慕课网《进击Node.js基础》初识promise相关的知识，希望对你有一定的参考价值。

首先用嘴简单的方式实现一个动画效果

<!doctype>
<html>
<head>
<title>Promise animation</title>
<style type="text/css">
    .ball {
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }

    .ball1 {
        background: red;
    }
    .ball2 {
        background: yellow;
    }
    .ball3 {
        background: green;
    }

</style>
</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 type="text/javascript">
        //定义三个球
        var ball1 = document.querySelector(‘.ball1‘)
        var ball2 = document.querySelector(‘.ball2‘)
        var ball3 = document.querySelector(‘.ball3‘)
        //球，移动距离，回调函数
        function animate(ball, distance, cd){
            //每13毫秒改变一次圆球的位置，直到到达指定位置
            setTimeout(function(){
                var marginLeft = parseInt(ball.style.marginLeft,10)
                //球达到预期位置
                if(marginLeft === distance){
                    cd && cd()
                }else{
                    //球在左侧
                    if(marginLeft < distance){
                        marginLeft++
                    }else{
                        //球在右侧
                        marginLeft--
                    }
                    //调整球的位置
                    ball.style.marginLeft = marginLeft
                    animate(ball, distance, cd)
                }
            },13)
        }
        //控制动画
        animate(ball1, 100,function(){
            animate(ball2, 200, function(){
                animate(ball3, 150, function(){
                    animate(ball2, 150, function(){
                        animate(ball1, 150, function(){

                        })
                    })
                })
            })
        })

    </script>
</body>
</html>

 

以上是关于10慕课网《进击Node.js基础》初识promise的主要内容，如果未能解决你的问题，请参考以下文章

06慕课网《进击Node.js基础》作用域和上下文

05慕课网《进击Node.js基础》HTTP概念进阶

04慕课网《进击Node.js基础》HTTP讲解

慕课网学习node.js

Node.js爬虫-爬取慕课网课程信息

慕课网视频破解付费分享-前端开发-Python等