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>

相关文章

  • 详解js访问对象的属性和方法

    详解js访问对象的属性和方法

    在本篇文章里我们给大家分享了关于js访问对象的属性和方法的相关知识点,有需要的朋友们可以学习下。
    2018-10-10
  • window.open()详解及浏览器兼容性问题示例探讨

    window.open()详解及浏览器兼容性问题示例探讨

    这篇文章主要介绍了window.open()的使用及浏览器兼容性问题方面的知识,感兴趣的朋友可以参考下
    2014-05-05
  • javascript省市区三级联动下拉框菜单实例演示

    javascript省市区三级联动下拉框菜单实例演示

    这篇文章主要介绍了javascript实现省市区三级联动下拉框菜单很详细的代码,解决了大家实现javascript省市区三级联动下拉框菜单的问题,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript循环_动力节点Java学院整理

    JavaScript循环_动力节点Java学院整理

    这篇文章主要为大家详细介绍了JavaScript循环的相关资料,JavaScript的两种循环方式,一种是for循环,另while一种是循环具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript enum枚举类型定义及使用方法

    JavaScript enum枚举类型定义及使用方法

    这篇文章主要介绍了JavaScript enum枚举类型定义及使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • ECMAScript6函数默认参数

    ECMAScript6函数默认参数

    这篇文章主要介绍了ECMAScript6函数默认参数的相关资料,需要的朋友可以参考下
    2015-06-06
  • JS+CSS实现模仿浏览器网页字符查找功能的方法

    JS+CSS实现模仿浏览器网页字符查找功能的方法

    这篇文章主要介绍了JS+CSS实现模仿浏览器网页字符查找功能的方法,实例分析了javascript实现查找功能的样式及相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • js实现文本框中输入文字页面中div层同步获取文本框内容的方法

    js实现文本框中输入文字页面中div层同步获取文本框内容的方法

    这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下
    2015-03-03
  • javascript中html字符串转化为jquery dom对象的方法

    javascript中html字符串转化为jquery dom对象的方法

    最近项目需求要开发百度地图相关的一个应用,需要从硬编码的html字符串中提取自己想要的元素以及属性信息,由于在js中或者jq中操作元素节点以及属性都是使用dom对象或者jq对象。下面介绍javascript中html字符串转化为jquery dom对象的方法,需要的朋友可以参考下
    2015-08-08
  • js实现的二分查找算法实例

    js实现的二分查找算法实例

    这篇文章主要介绍了js实现的二分查找算法,结合实例形式较为详细的分析了JavaScript简单实现二分查找算法的运算原理与具体步骤,需要的朋友可以参考下
    2016-01-01

最新评论