编程 Javascript

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

Posted in Javascript onApril 14, 2019

<!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>

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

- Author -

嗨,陈强

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

QQ登录简单实现代码

Mar 09 Javascript

Javascript Jquery 遍历Json的实现代码

Mar 31 Javascript

JavaScript中的Math 使用介绍

Apr 21 Javascript

JavaScript通过prototype给对象定义属性用法实例

Mar 23 Javascript

javascript定义类和类的实现实例详解

Dec 01 Javascript

深入理解JS实现快速排序和去重

Oct 17 Javascript

jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法

Nov 16 Javascript

详解angular ui-grid之过滤器设置

Jun 07 Javascript

搭建element-ui的Vue前端工程操作实例

Feb 23 Javascript

解决Vue 通过下表修改数组,页面不渲染的问题

Mar 08 Javascript

js控制随机数生成概率代码实例

Mar 21 Javascript

js判断在哪个浏览器打开项目的方法

Jan 21 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