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>