<!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. 【一些简单的jQuery选择器】

    学习[js DOM 编程艺术],最后面有许多jQuery的选择器,每个都动手敲了一遍. jQuery 提供了高级选择器的方法. js获取元素的三个基本方法分别是通过标签名,类名和id,即(getEle ...

  2. Java快速入门-02-基础篇

    Java快速入门-02-基础篇 上一篇应该已经让0基础的人对 Java 有了一些了解,接一篇更进一步 使用 Eclipse 快捷键 这个老师一般都经常提,但是自己不容易记住,慢慢熟练 快捷键 快捷键作 ...

  3. 线程Event事件

    事件(event) 事件是不同线程之间的同步对象 enent可以通过设置.等待.清除一个标识(flag),来进行线程间的控制 线程可以通过获取这个标志位(flag)的状态(设置或未设置)来控制线程 事 ...

  4. 二、python小功能记录——监听鼠标事件

    1.原文链接 #-*- coding:utf-8 -*- from pynput.mouse import Button, Controller ## ======================== ...

  5. 【2017.10.13 ROS机器人操作系统】ROS系统常用术语及资源

    ROS机器人操作系统是一种后操作系统,提供了类似于软件开发中使用到的中间件的功能. ROS: Robot Operating System 机器人操作系统 Package: 功能包 Stack: 功能 ...

  6. ZT 感触的屌丝职场记 投递人 itwriter 发布于 2013-05-27 09:21 评论(18) 有3402人阅读 原文链接 [收藏] « » 　　作者@幻想哥呀幻想哥 　　有一位屌丝男，从小抱着报效祖国的理想上了大学，毕业后干了 IT 行业，高中那时候看文汇报说，搞 IT 的在上

    屌丝职场记 投递人 itwriter 发布于 2013-05-27 09:21 评论(18) 有3402人阅读  原文链接  [收藏]  « » 作者@幻想哥呀幻想哥 有一位屌丝男,从小抱着报效祖国的 ...

  7. [COGS 2065]学数数

    2065. 学数数 ★★★☆   输入文件:jxthree.in   输出文件:jxthree.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 从前有一只咩,还有一只叽 ...

  8. [BZOJ 4010][HNOI 2015] 菜肴制作

    4010: [HNOI2015]菜肴制作 Time Limit: 5 Sec  Memory Limit: 512 MBSubmit: 1776  Solved: 889[Submit][Status ...

  9. Odoo中Application与modules的区别

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9278681.html 一:Application(应用) application一般是针对大功能的模块,如提供 ...

  10. 用firefox的插件下载网页中的视频

    对于网页中的一些视频,直接下载不了,可以用专用下载软件下载,也可以用firefox的NetVideohunter Video Downloader插件下载网页中的视频,方便快捷. 工具/原料   fi ...