js中async函數(shù)結(jié)合promise的示例分析

發(fā)布時(shí)間：2021-07-27 09:34:02 來(lái)源：億速云閱讀：129 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要為大家展示了“js中async函數(shù)結(jié)合promise的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js中async函數(shù)結(jié)合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 class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<button id="btn">點(diǎn)擊開(kāi)始</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();//為什么調(diào)用這個(gè)成功函數(shù)
        })
      })
    }
  </script>
</body>
</html>

以上是“js中async函數(shù)結(jié)合promise的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

js中async函數(shù)結(jié)合promise的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽