微信小程序免费吗_js中async函数结合promise的小案

日期:2021-01-07 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

js中async函数结合promise的小案例浅析     ,陈强   这篇文章主要介绍了js中async函数结合promise的小案例浅析,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

 !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 /div 
 div /div 
 div /div 
 div /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. sync 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