SOURCE

console 命令行工具 X clear

                    
>
console
const target = document.getElementById('box');
target.style.cssText = `
   position: absolute;
   left: 0px;
   top: 0px;
`

const walk = (direction, distance, callback) => {
   setTimeout(() => {
       let currentLeft = parseInt(target.style.left, 10)
       let currentTop = parseInt(target.style.top, 10)
        console.log(currentTop)
       const shouldFinish = (direction === 'left' && currentLeft === -distance) || (direction === 'top' && currentTop === -distance)

       if (shouldFinish) {
           callback && callback()
       }
       else {
           if (direction === 'left') {
               currentLeft--
               target.style.left = `${currentLeft}px`
           }
           else if (direction === 'top') {
               currentTop--
               target.style.top = `${currentTop}px`
           }

           walk(direction, distance, callback)
       }
   }, 20)
}

walk('left', 20, () => {
   walk('top', 50, () => {
       walk('left', 30, Function.prototype)
   })
})

const target1 = document.getElementById('box1');
target1.style.cssText = `
    position: absolute;
    left: 100px;
    top: 100px;
`
const promiseWalk = (direction, distance) => {
    new Promise((resolve, reject) => {
        const innerWalk = () =>  {
            let currentLeft = parseInt(target1.style.left, 10);
            let currentTop = parseInt(target1.style.top, 10);
            const isOver = direction === 'left' && distance === -currentLeft ||
            direction === 'top' && distance === -currentTop;
            if(isOver) {
                resolve()
            } else {
                if(direction === 'left') {
                    currentLeft--;
                    target.style.left = `${currentLeft}px`;
                } else {
                    currentTop--;
                    target.style.top = `${currentTop}px`;
                }
                innerWalk()
            }
        }; 
        innerWalk()
    })
};
promiseWalk('left', 20)
.then(() => promiseWalk('top', 50))
.then(() => promiseWalk('left', 50))
<div id='box'>11</div>
<div id='box1'>22</div>
<div id='box2'>33</div>