<!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. ssm 注解@ResponseBody 返回json 乱码问题

    方法一:在@RequestMapping上加入 produces方法 @RequestMapping(value = "/upload.do",method = RequestMe ...

  2. Kali 防火墙配置

    Kali操作系统安装时默认已经安装了"iptables",配置前先检查有没有安装,命令如下:iptables -L显示如下(图1),则表示已经安装了,如果没有安装,使用命令:apt ...

  3. 小程序-报错 xxx is not defined （已解决）

    小程序-报错 xxx is not defined (已解决) 问题情境: 这样一段代码,微信的小程序报错 is not defined 我 wxml 想这样调用 //wxml 代码 <view ...

  4. HandlerThread使用

    HandlerThread 是一个包含 Looper 的 Thread,我们可以直接使用这个 Looper 创建 Handler.  1.HandlerThread 源码 public class H ...

  5. springIOC学习笔记

    目录 目的 引用 xml方式 配置 配置实例 使用 底层简单模拟 全注解方式 基础 包扫描方式 配置 使用 config方式 配置 使用 spring整合junit 引用 示例 目的 让spring统 ...

  6. linux用户的增加与删除

    sudo useradd xxx 仅仅是添加用户, 不会在home目录添加帐号很简单 Ubuntu中提供了两种方式 图形界面 增加 和 Windows 一样 ,还有一种就是 Linux传统的 增加方法 ...

  7. 【Oracle】锁表处理 SQL 错误: ORA-00054: 资源正忙, 但指定以 NOWAIT 方式获取资源, 或者超时失效

    问题描述有时候ORACLE数据的某些表由于频繁操作,而且比较大,会导致锁表(死锁). 问题分析(1)锁的分析ORACLE里锁有以下几种模式:0:none1:null 空2:Row-S 行共享(RS): ...

  8. 第二课，DOS常用命令及进制转换

    课后的一点小总结还望各位大神点评. 注意事项:1.不要在c盘进行操作. 2.要注意路径. 3.要熟练掌握DOS命令 操作指令(.在本文代表空格,本次以文档为例) 打开DOS:窗口键+r  输入cmd ...

  9. ETCD TLS 配置的坑

    一.环境准备 环境总共 3 台虚拟机,系统为centos7,1个 master,2 个 etcd 节点,master 同时也作为 node 负载 pod,在分发证书等阶段将在另外一台主机上执行,该主机 ...

  10. Oracle shared server模式连接ORA-12519

    设置了shared server连接,dispatcher进程和shared server进程都没有问题listener.ora文件配置如下:LSNR2=  (DESCRIPTION=    (ADD ...