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索引在使用中的一些困惑
Oct 24 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
动态加载jquery库的方法
Feb 12 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
jquery拖动改变div大小
Jul 04 jQuery
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
什么是SOLID
Mar 24 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设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python内置模块turtle绘图详解
2017/12/09 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
基于树莓派的语音对话机器人
2019/06/17 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
python 实现单例模式的5种方法
2020/09/23 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
技术副厂长岗位职责
2013/12/26 职场文书
年会活动策划方案
2014/01/23 职场文书
企业管理培训感言
2014/01/27 职场文书
有关爱国演讲稿
2014/05/07 职场文书
优秀班组事迹材料
2014/12/24 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书