Promise回調地獄學習小小小小小筆記

Promise屬於ES6新加入的語法

目前在瀏覽器中輸入Promise就能夠看到有這個對象了

用法是建立一個新的函數來包括原來的函數體而且在原來的函數體中再包一個能夠返回一個新的實例化Promise對象而這個promise自帶resolve用於回調

like this:

    function promiseAnimate(ball,dis){
        return new Promise(function(resolve,reject){
            function _animation() {
                setTimeout(function () {
                    var marginLeft = parseInt(ball.style.marginLeft);
                    if (marginLeft == dis) {
                        resolve()
                    } else {
                        if (marginLeft < dis) {
                            marginLeft++
                        } else {
                            marginLeft--
                        }
                        ball.style.marginLeft = marginLeft + 'px'
                        _animation();
                    }
                }, 13)
            }
            _animation();//因爲被包裹進去以後沒法進行加載那個方法因此要在函數的Promise內部執行這個函數
        })
    }

原函數體:

    function _animate(){
        setTimeout(function () {
            var marginLeft = parseInt(ball.style.marginLeft)
            if(marginLeft==dis){
                resolve()
            }else{
                if(marginLeft<dis){
　　　　　　　　　　　　//dosomething....
                }
            }
        },13)
    }

而調用部分

    promiseAnimate(ball1,100)
        .then(function(){
              return promiseAnimate(ball2,200)
        })
        .then(function(){
            return promiseAnimate(ball3,300)
        })
        .then(function(){
            return promiseAnimate(ball3,100)
        })
        .then(function(){
            return promiseAnimate(ball2,100)
        })
        .then(function(){
            return promiseAnimate(ball1,100)
        })

首先是第一次開始調用這個函數,因爲有resolve(詳細的原理還不清楚)在執行完以上的就會符合條件進行resolve(),因爲以前在最外層的函數(promiseAnimate)內返回了一個實例化了的promise對象因此這個對象就有了then的方法(具體內部發生了目前還不瞭解)

使用環境設想:日常會用到比較多的回調函數 這個如何讓本身使用回調的更方便

resolve()不傳入參數是訪問不到其餘東西的

.then 以後的return PromiseAnimate()應該是爲了下次的回調因此要return

留下的問題:這個如何讓本身使用回調的更方便?

 --------------------

待更新...