Promise實現小球的運動

時間 2019-11-12

標籤 promise 實現小球運動简体版

原文原文鏈接

Promise簡要說明javascript

Promise能夠處理一些異步操做；如像setTimeout、ajax處理異步操做是一函數回調的方式;固然ajax在jQuery版本升級過程當中，編寫方式也有所變更.css

Promise是抽象異步處理對象以及對其進行各類操做的組件.html

Promise最初被提出是在 E語言中，它是基於並列/並行處理設計的一種編程語言。前端

建立promise對象的流程以下所示。java

new Promise(fn) 返回一個promise對象node
在fn 中指定異步等處理ajax
- 處理結果正常的話，調用resolve(處理結果值)編程
- 處理結果錯誤的話，調用reject(Error對象)api

resolve("new Promise value......"); 會讓這個promise對象當即進入肯定（即resolved）狀態，並將 "new Promise value......" 傳遞給後面then裏所指定的 onFulfilled 函數promise

Promise.resolve(value); 的返回值也是一個promise對象，因此咱們能夠像下面那樣接着對其返回值進行 .then 調用

Promise 實現小球的運動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animate Ball</title>
    <style type="text/css">
        .ball {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            margin-left: 0;
        }
        .ball1 {
            background-color: yellow;
        }
        .ball2 {
            background-color: red;
        }
        .ball3 {
            background-color: blue;
        }
    </style>
</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" src="./node_modules/bluebird/js/browser/bluebird.js"></script>
    <script type="text/javascript" >
    /*function animateBall(ball, distance, callback){
            //setTimeout過渡效果
            setTimeout(function(){
                var marginLeft = parseInt(ball.style.marginLeft, 10);
                console.log(marginLeft);
                if(marginLeft==distance){
                    callback && callback();
                }else{
                    if(marginLeft<distance){
                        marginLeft ++;
                    }
                    if(marginLeft>distance){
                        marginLeft--;
                    }
                    ball.style.marginLeft = marginLeft +'px';
                    //callback
                    animateBall(ball, distance, callback);
                }
            }, 13); 
        }
        var ball1 = document.querySelector('.ball1');
        var ball2 = document.querySelector('.ball2');
        var ball3 = document.querySelector('.ball3');
        animateBall(ball1, 150, function(){
            animateBall(ball2, 250, function(){
                animateBall(ball3, 350, function(){
                    animateBall(ball3, 200, function(){
                         animateBall(ball2, 100, function(){
                            animateBall(ball1, 50, function(){
                                
                            })
                         })
                    })
                })
             })
        })*/
        var ball1 = document.querySelector('.ball1');
        var ball2 = document.querySelector('.ball2');
        var ball3 = document.querySelector('.ball3');
        //promise
        var Promise = window.Promise;

        //使用 promise 替代回調函數
        function promiseAnimate(ball, distance){
            return new Promise(function(resolve, reject) {
                function _animate(){
                    //setTimeout過渡效果
                    setTimeout(function(){
                        var marginLeft = parseInt(ball.style.marginLeft, 10);
                        console.log(marginLeft);
                        if(marginLeft==distance){
                            //resolve函數：將Promise對象的狀態從 「未完成」變爲 「成功」（Pending ->Resolved），在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出去
                            resolve(ball, distance);
                        }else{
                            if(marginLeft<distance){
                                marginLeft ++;
                            }
                            if(marginLeft>distance){
                                marginLeft--;
                            }
                            ball.style.marginLeft = marginLeft +'px';
                            //callback
                            _animate();
                        }
                    }, 13); 
                }
                _animate();
            });
        }
        promiseAnimate(ball1, 150)
            .then(function(){
               return promiseAnimate(ball2, 250);
            }).then(function(){
               return promiseAnimate(ball3, 300);
            }).then(function(){
               return promiseAnimate(ball3, 200);
            }).then(function(){
               return promiseAnimate(ball2, 100);
            }).then(function(){
               return promiseAnimate(ball1, 50);
            })
    </script>
</body>
</html>