美文网首页
es6 promise写个小球滚动

es6 promise写个小球滚动

作者: 小白小白啦 | 来源:发表于2018-10-14 13:01 被阅读21次

    参考慕课网课程写一个小球的滚动操作,就是把下图三个小球分别右移动100px、200px、300px但是要求是红色滚动完成后,黄色开始滚动,黄色完成后,绿色开始滚动。

    三个小球
    主要使用回调函数、promise、async三种方法编写。我对promise的理解就是它是一个"承诺",只有执行到了resolve()函数,才会触发then里面的函数,就是我给then里面的回调函数一个"承诺",放心小伙子,到时候我一定执行你的,你就老老实实待着吧。

    思路: 一般的做法就是使用setTimeout函数,十几毫秒刷新一下,产生移动的感觉。

    代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
        <style>
            .ball {
                width: 40px;
                height: 40px;
                border-radius: 20px;
                margin-bottom: 5px;
            }
            .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>
        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)
    animate(ball2, 200)
    animate(ball3, 300)
    </script>
    </body>
    </html>
    

    发现三个小球同时运动,并不会顺序执行,那怎么办?聪明的小伙伴肯定想到了回调函数,接下来基于回到函数写一下。

    回调函数版本

        animate(ball1, 100, function(){
            animate(ball2, 200, function(){
                animate(ball3, 300)
            })
        })
    

    这样就可以实现顺序执行了,但是有个问题,会陷入回调地狱,代码很长不宜阅读。运用promise改下一下

    promise版本

    function animatePro(ball, distance){
        return new Promise((resolve, reject) => {
            function _animate(){
                setTimeout(()=>{
                    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()
        })
    }
    
    animatePro(ball1, 100)
        .then(()=>{
            return animatePro(ball2, 200)
        })
        .then(() => {
            return animatePro(ball3, 300)
        })
    

    这样代码就清晰多了,还可以更进一步,使用async编写
    async版本

    let animation = async function(){
        let b1 = await animatePro(ball1, 100)
        let b2 = await animatePro(ball2, 200)
        let b3 = await animatePro(ball3, 300)
    }
    animation()
    

    这就是和普通的代码一样了。

    相关文章

      网友评论

          本文标题:es6 promise写个小球滚动

          本文链接:https://www.haomeiwen.com/subject/ncyzaftx.html