對比promise的流程控制和js的回調

例如寫一個方塊不斷移動的動畫，首先寫一個移動動畫的函數，然後不斷的調用，用傳統寫法如下：

//動畫函數
function moveTo(el,x,y,cb) {
    el.style.transform = `translate(${x}px,${y}px)`;
    setTimeout(function() {
        cb && cb();//此處用了&&符號，表示首先會判斷cb是否存在，如果存在且必須是函數
    },1000)
}
var start = document.getElementsByTagName('button')[0];
var el = document.getElementsByClassName('block')[0];
//給按鈕添加點擊事件，動畫觸發
start.addEventListener('click',function() {
    moveTo(el,30,100,function() {/*調用函數*/
        moveTo(el,100,50,function() {
            moveTo(el,100,100,function(){
                 moveTo(el,0,0,function() {
                    alert("移動結束");//最後移動完之後彈出文字
                })
            });
        });
    });
});

可以發現用該方法寫的話如果需要很多的移動就需要不停的調用，如果有哪一步需要修改的話都不知到在哪一步修改
效果圖如下：

然後再用promise實現如下：

var start = document.getElementsByTagName('button')[0];
var el = document.getElementsByClassName('block')[0];
function moveTo(el,x,y) {
    return new Promise(function(resolve) {
        el.style.transform = `translate(${x}px,${y}px)`;
        setTimeout(function() {
            resolve();//表示執行.then()裏面的內容
        },1000)
    })
}
function move() {
    moveTo(el,100,100)
        .then(function() {
            console.log('第一次移動');
            return moveTo(el,200,200);
        }).then(function() {
            console.log('第二次移動');
            return moveTo(el,280,250);
        }) .then(function() {
            console.log('第三次移動');
            return moveTo(el,200,200);
        })
}
start.addEventListener('click',function() {
    move();
});

該方法就是不停的通過返回promise實例再進行鏈式調用then方法，在then方法裏面調用移動函數，就不用不斷的嵌套。