<!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>
*{
;
;
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)=>{
+})`
})
btn.onclick=async function(){
;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>

async函数结合promise的小案例的更多相关文章

  1. ES2017中的async函数

    前面的话 ES2017标准引入了 async 函数,使得异步操作变得更加方便.本文将详细介绍async函数 概述 async 函数是 Generator 函数的语法糖 使用Generator 函数,依 ...

  2. async函数

    async函数的实现原理,就是将Generator函数和自动执行器,包装在一个函数里.async函数返回Promise对象,async函数的return值是then方法的参数,await后跟Promi ...

  3. 17.async 函数

    async 函数 async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 ...

  4. ES6的新特性（18）——async 函数

    async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generato ...

  5. ES6中的async函数

    一.概述 async 函数是 Generator 函数的语法糖 使用Generator 函数,依次读取两个文件代码如下 var fs = require('fs'); var readFile = f ...

  6. async 函数-----------------解决异步操作隧道的亮光

    之前也学过,只是没有学好,公司现在用的都是async函数 , 所以决定把它弄懂.最近看了看阮一峰的博客,做下记录. 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用 ...

  7. ES6学习笔记（十六）async函数

    1.含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖,号称异步的终极解决方案. 前文有一个 Gen ...

  8. ES6——async函数

    目录 1.async 函数是 Generator 函数的语法糖. 2.async函数对 Generator 函数的改进,体现在以下四点. 3.基本用法 一个获取股票报价的函数 指定多少毫秒后输出一个值 ...

  9. 对async 函数的研究

    async 函数 1.ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator ...

随机推荐

  1. QT5.9 新特性与版本回顾

    原文链接: http://blog.qt.io/blog/2017/05/31/qt-5-9-released 翻译内容如下,采用的是第三方某在线翻译软件,所以有些地方不是太精确,纵然大吉做了一定的调 ...

  2. jquery 仿windows10菜单效果下载

    http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载

  3. Creating dynamic/configurable parameterized queries in Entity Framework

    https://dillieodigital.wordpress.com/2013/05/09/creating-dynamicconfigurable-parameterized-queries-i ...

  4. mac下同时安装jdk1.7和jdk1.8

    1.安装jdk1.7时会弹出报错,说版本不兼容. 解决方案 双击安装包,使安装包挂在到机器上,即在Finder里可以看到一个名字为JDK 7 Update 60的Device. 在terminal下输 ...

  5. win10_64位系统下安装ALM12.01（QC），笔者只在Win10平台上试过，大家也可以在win7的平台上试一下，一个道理！（Alpha）

    HP的ALM是一个非常全面的缺陷管理系统,但安装学习的非常的麻烦,以前学的是ALM,好久没用带今天想学习一下发现安装的非常的困难 !发现网上对ALM的系统安装的介绍非常少,也非常琐碎!今天就借着自己学 ...

  6. 算法之杨辉三角形(Java语言)

    杨辉三角形, 又称贾宪三角形.帕斯卡三角形. 前9层写出来如下: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 1 6 15 20 15 6 1 1 7 21 ...

  7. MyBatis学习笔记(一)

    测试Demo的目录结构: com.luohao.config ->MyBatisCongfig.xml ->userMapper.xml com.luohao.Test ->Test ...

  8. SQL读取注册表值

    最近写一个自动检查SQL Serve安全配置的检查脚本,需要查询注册表,下面是使用SQL查询注册表值的方法. ) ) ) ) --For Named instance --SET @Instance ...

  9. Django中请求的生命周期 和 FBV模式和CBV模式

    Django的生命周期就是你的 一个请求所发生的整个流程 Django的生命周期内到底发生了什么呢?? . 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端 请求头和请求体中会包含浏 ...

  10. mysql_fetch_row，mysql_fetch_array，mysql_fetch_object，mysql_fetch_assoc

    php从mysql中访问数据库并取得数据,取得结果的过程中用到好几个类似的方法,区别及用法值得区分一下,看下面的代码 代码如下: <?php $link=mysql_connect('local ...