<!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. WinSxS文件夹瘦身

    WinSxS文件夹瘦身 2014-5-8 18:03:32来源:IT之家作者:阿象责编:阿象 评论:27 刚刚,我们分享了如何用DISM管理工具查看Win8.1 WinSxS文件夹实际大小.对于Win ...

  2. Compiling a kernel module for the raspberry pi 2 via Ubuntu host

    Compiling a kernel module for the raspberry pi 2 via Ubuntu host Normally compiling a kernel module ...

  3. 同步(Synchronous)和异步(Asynchronous)的概念

    web项目中的同步与异步 在我们平时的web项目开发中会经常听到ajax请求这样一个称呼,在web项目中可以通过js或者jquery发送同步请求又或者异步请求,同步请求呢往往代表着你必须等待这次请求结 ...

  4. 使用iCarousel的旋转木马效果请求图片

    使用iCarousel的旋转木马效果请求图片 https://github.com/nicklockwood/iCarousel 先看看效果: 源码如下: // // RootViewControll ...

  5. FTP上传(批处理)

    将以下内容保存为名为ftp_upload.txt的文件: open 192.168.11.199testw\adadminboc.123binaryput e:\wt.zipbye 在命令提示符下运行 ...

  6. 安装PHPphp-5.4.4

    一.下载PHPphp-5.4.4 [root@aliyun software]# pwd /software[root@aliyun software]# wget http://mirrors.so ...

  7. 新特性之MAPI over HTTP \ 配置 MAPI over HTTP

    Exchange 2016 中的 MAPI over HTTP https://docs.microsoft.com/zh-cn/Exchange/clients/mapi-over-http/map ...

  8. [BZOJ 3514]Codechef MARCH14 GERALD07加强版 (CHEF AND GRAPH QUERIES)

    [BZOJ3514] Codechef MARCH14 GERALD07加强版 (CHEF AND GRAPH QUERIES) 题意 \(N\) 个点 \(M\) 条边的无向图,\(K\) 次询问保 ...

  9. Python2.7 - IMOOC - 4

    第三章 Python变量和数据类型 3-7.Unicode字符串 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理. 最早的计算机在设计时采用8个比特(bit)作为一个字节(b ...

  10. mysql 插入汉字异常: Incorrect string value: '\xE8\xB0\xA2\xE9\x9D\x99' for column 'uname' at row 1

    该字段编码问题,不支持中文,设置支持中文即可