async函数结合promise的小案例

小短腿 2019-04-15 01:47203 阅读

 

<! DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< style >
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
height: 15px;
margin-top: 20px;
transform: translateX( -100%);
transition: all 1s linear;
}
button{
margin-top: 30px;
}
< / style >
</ head >
< body >
< div class= "box" ></ div >
< div class= "box" ></ div >
< div class= "box" ></ div >
< div class= "box" ></ div >
< button id= "btn" >点击开始 </ button >
< script >
 
const box= document. querySelectorAll( ".box")
 
box. forEach(( item, index) =>{
item. style. cssText= `width: ${ 100+ index* 15 } px;background:rgb( ${ Math. random()* 255 } , ${ Math. random()* 255 } , ${ Math. random()* 255 } )`
})

btn. onclick= async function(){
for( let i= 0; i< box. length; i++){
await fn( box[ i])
}
}

function fn( el){
return new Promise(( resolve, reject) =>{
el. style. transform= `translateX(0)`;
el. addEventListener( "transitionend", function(){
resolve(); //为什么调用这个成功函数
})
})
}

< / script >
</ body >
</ html >
回复数量: 0
暂无评论~~
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!