js中async函数结合promise的小案例浅析


Posted in Javascript onApril 14, 2019

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>
Javascript 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
继续学习javascript闭包
Dec 03 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
理解javascript中的闭包
Jan 11 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 #Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 #Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 #Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 #Javascript
JS实现马赛克图片效果完整示例
Apr 13 #Javascript
ES6入门教程之let、const的使用方法
Apr 13 #Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 #Javascript
You might like
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
js读取本地excel文档数据的代码
2010/11/11 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
JS打印组合功能
2016/08/04 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
基于Vue单文件组件详解
2017/09/15 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
公司授权委托书
2014/04/04 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
作风建设整改方案
2014/10/27 职场文书
全陪导游词
2015/02/04 职场文书
企业文化学习心得体会
2016/01/21 职场文书
检讨书之工作不认真
2019/08/14 职场文书
python中取整数的几种方法
2021/11/07 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技