js中async函数结合promise的小案例浅析


Posted in Javascript onApril 14, 2019

js中async函数结合promise的小案例浅析

<!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>
*{
margin: 0;
padding: 0;
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)=>{
item.style.cssText=`width:${100+index*15}px;background:rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
})
    btn.onclick=async function(){
      for(let i=0;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>
Javascript 相关文章推荐
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
js微信分享接口调用详解
Jul 23 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 #Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 #Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 #Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 #Javascript
JS实现马赛克图片效果完整示例
Apr 13 #Javascript
ES6入门教程之let、const的使用方法
Apr 13 #Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 #Javascript
You might like
php使用json_encode对变量json编码
2014/04/07 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
Dojo 学习要点
2010/09/03 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
python线程池threadpool使用篇
2018/04/27 Python
Python for循环中的陷阱详解
2018/07/13 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
建筑安全责任书范本
2014/07/24 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2014年体育部工作总结
2014/11/13 职场文书
入党现实表现材料
2014/12/23 职场文书
中秋节感想
2015/08/10 职场文书
企业法人任命书
2015/09/21 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL