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 相关文章推荐
jquery简单体验
Jan 10 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 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上显示JFreechart画的统计图方法
2013/11/03 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
详解a++和++a的区别
2017/08/30 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
jQuery中event.target和this的区别详解
2020/08/13 jQuery
vue实现树状表格效果
2020/12/29 Vue.js
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中的函数用法入门教程
2014/09/02 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
深入了解Python 变量作用域
2020/07/24 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
党员承诺书格式
2014/05/21 职场文书
学校开学标语
2014/10/06 职场文书
学校教学工作总结2015
2015/05/19 职场文书
不同意离婚答辩状
2015/05/22 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
教学工作总结范文5篇
2019/08/19 职场文书