对比promise的流程控制和js的回调

妖狐艹你老母 2021-11-04 19:12 177阅读 0赞

例如写一个方块不断移动的动画，首先写一个移动动画的函数，然后不断的调用，用传统写法如下：

//动画函数
    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("移动结束");//最后移动完之后弹出文字
                    })
                });
            });
        });
    });

可以发现用该方法写的话如果需要很多的移动就需要不停的调用，如果有哪一步需要修改的话都不知到在哪一步修改  
效果图如下：  
![在这里插入图片描述][20190807172008703.gif]  
然后再用promise实现如下：

该方法就是不停的通过返回promise实例再进行链式调用then方法，在then方法里面调用移动函数，就不用不断的嵌套。

[20190807172008703.gif]: /images/20211104/2c9e629ae71347f9840cf15b6742c0f1.png