对比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方法里面调用移动函数，就不用不断的嵌套。