<!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. C++学习笔记(8)----C++类的大小

    C++类的大小 (i) 如下代码: #include<iostream> using namespace std; class CBase { }; class CDerive :publ ...

  2. RocketMQ读书笔记7——吞吐量优先的场景

    [Broker端进行消息过滤] 在Broker端进行消息过滤,可以减少无效消息发送到Consumer,少占用网络宽带从而提高吞吐量. [过滤方式1——通过Tag过滤] [ 关于Tag和Key ] 对一 ...

  3. 《SQL必知必会》知识点汇总

    select CustomerNo from dbo.Customers; 通配符的使用 select *from dbo.Customers; select CustomerNo from dbo. ...

  4. [翻译] JNWSpringAnimation

    JNWSpringAnimation https://github.com/jwilling/JNWSpringAnimation JNWSpringAnimation is a subclass o ...

  5. [翻译] PQFCustomLoaders

    PQFCustomLoaders Current version: 0.0.1 Collection of highly customizable loaders for your iOS proje ...

  6. [翻译] AsyncDisplayKit

    AsyncDisplayKit AsyncDisplayKit is an iOS framework that keeps even the most complex user interfaces ...

  7. Python实例---三级菜单的实现[high]

    # version: python3.2.5 # author: 'FTL1012' # time: 2017/12/7 09:16 menu = { '陕西': { '西安': { '未名区': [ ...

  8. 乘风破浪：LeetCode真题_001_TwoSum

    乘风破浪:LeetCode真题_001_TwoSum 一.前言 沉寂了很长时间,也悟出了很多的道理,写作是一种业余的爱好,是一种自己以后学习的工具,是对自己过往的经验积累的佐证,是检验自己理解深入度的 ...

  9. Asp.Net MVC Identity 2.2.1 使用技巧（一）

    开发环境:vs2015 UP3  or  vs2017RC  项目环境:asp.net 4.6.1   identity版本为:asp.net identity 2.2.1 1.创建项目. 没什么好说 ...

  10. 错误：该表单无法显示，可能是由于 Microsoft SharePoint Server State Service 配置不当。有关详细信息，请与服务器管理员联系

    问题场景: 1.SharePoint 2013 中工作流需要状态服务(State Service),如果没有正确配置状态服务,则在给列表.文档库添加工作流时会遇到错误: “该表单无法显示,可能是由于 ...