js中async函數結合promise的小案例淺析
更新時間：2019年04月14日 09:08:58 作者：嗨,陳強
這篇文章主要介紹了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 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>
相關文章
這篇文章主要介紹了微信小程序實現pdf,word等格式文件上傳的方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
詳解ES6數組方法find()、findIndex()的總結
這篇文章主要介紹了詳解ES6數組方法find()、findIndex()的總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要介紹了js實現防止被iframe的方法,實例分析了兩種比較常用的javascript防止頁面被iframe的技巧,非常簡單實用,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JavaScript通過字符串調用函數的實現方法,實例分析了javascript動態(tài)調用函數的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了js獲取input長度并根據頁面寬度設置其大小及居中對齊的方法,需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細介紹了微信小程序實現輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
非?？岬膉s圖形漸隱導航菜單欄...2007-08-08
微信小程序在 2.2.1 版本后增加了對 npm 包加載的支持，使得小程序支持使用 npm 安裝第三方包。這篇文章主要介紹了在小程序開發(fā)中使用npm的方法，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了Javascript中的對象和繼承，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要為大家詳細介紹了javascript實現前端分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06