async函数结合promise的小案例

最新推荐文章于 2024-09-28 15:34:53 发布

嗨，玉麟

最新推荐文章于 2024-09-28 15:34:53 发布

阅读量222

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yulinjiayuan/article/details/96082484

本文通过一个HTML页面动画实例，演示了如何使用async/await语法控制异步操作，实现平滑的动画过渡效果。代码中，每个动画元素在完成其过渡动画后，会触发一个Promise，从而确保所有动画按顺序执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

async 函数这个可以让异步变成可控的代码

<!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>