前端开发中会遇到很多异步回到，和相互依赖关系的情况，下面我们就通过一个简单案例整体的了解一下，常用的异步回调的用法和优势
1.案例很简单，页面上有三个小球
2.当页面加载后，第一个小球会向左滚动，当第一个小球到达500px的位置，第二个小球开始运动，当第二个小球到达300px的位置时，第三个小球开始运动，也同样向左滚动100px，当第三个小球到达位置时，浏览器弹出‘ok’
- html+css 简单的样式和结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#box{
position: absolute;
}
#box div{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#box :nth-child(1){
top: 0;
}
#box :nth-child(2){
top: 120px;
}
#box :nth-child(3){
top: 240px;
}
</style>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>callback 方法
- callback 写发就出现了大家常见的回调地狱(倒金字塔)结构的代码
<script>
let box = document.getElementById('box');
let balls = box.querySelectorAll('div');
function run(ele,speed,callback){
let pos = 0;
let timer = setInterval(()=>{
pos+=2;
if(pos>=speed){
clearInterval(timer);
callback();
}else{
ele.style.left = pos +'px';
}
},10)
}
run(balls[0],500,function(){
run(balls[1],300,function(){
run(balls[2],100,function(){
alert('ok')
})
})
})
</script>Pormise 方法
- 通过使用Promise的then方法，同样达到了效果，并且解决了，回到地狱问题；
<script>
let box = document.getElementById('box')
let balls = box.querySelectorAll('div')
function run(ele,speed){
return new Promise((resolve,reject)=>{
let pos = 0;
let timer = setInterval(()=>{
pos+=2;
if(pos>=speed){
clearInterval(timer);
resolve();
}else{
ele.style.left = pos +'px';
}
},10)
})
}
run(balls[0],500).then(data=>{
return run(balls[1],300);
}).then(data=>{
return run(balls[2],100);
}).then(data=>{
alert('ok');
})
</script>async await 方法
<script>
let box = document.getElementById('box')
let balls = box.querySelectorAll('div')
function run(ele,speed){
return new Promise((resolve,reject)=>{
let pos = 0;
let timer = setInterval(()=>{
pos+=2;
if(pos>=speed){
clearInterval(timer);
resolve();
}else{
ele.style.left = pos +'px';
}
},10)
})
}
async function m(){
await run(balls[0], 500);
await run(balls[1], 300);
await run(balls[2], 100);
}
m().then(data=>{
alert('ok')
})
</script>转载于:https://my.oschina.net/ndweb/blog/2247819