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>
相关文章
这篇文章主要介绍了antd table长表格如何出现滚动条,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
重点在于:以空间换时间，循环确定所着颜色;base确定起始颜色，i确定本次需要着色的单元格，感兴趣的朋友可以参考下哈2013-04-04
一直以为 && 和 || 这两个伟大的运算法只能在判断表达式使用，也就是常在if语句使用，原来错了，它还可以运用在简化选择性执行语句的操作，有点拗口，简单点也就是：操作执行某条语句，不执行某条语句。2009-11-11
JS中new Date().Format("yyyy-MM-dd") 报错的解决
这篇文章主要介绍了JS中new Date().Format("yyyy-MM-dd") 报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本文主要分享了javascript中递归的两种写法，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了图片懒加载imgLazyLoading.js的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要介绍了详解html-webpack-plugin插件(用法总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
下面小编就为大家带来一篇让DIV的滚动条自动滚动到最底部的3种方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
JavaScript 兼容IE、FireFox、Chrome等浏览器的xml处理函数（xml同步/异步加载、xsl转换、selectSingleNode、selectNodes）2011-11-11
本文为大家介绍下javascript设置金额样式即保留两位小数，下面有个不错的教程，需要的朋友可以了解下2013-12-12
最新评论