html部分

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewprot" content="width=device-width,initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="id=edge" />

        <title>对比Promise跟回调在流程控制上的区别</title>

        <style>

            #el{

                width: 100px;

                background: green;

                transition: all 1s;

                color: white;

                line-height: 100px;

                text-align: center;

                font-size: 40px;

            }

        </style>

    </head>

    <body>

        <div id="el">哦</div>

        <button id="btn">开始</button>

        <script src="js/main.js"></script>

    </body>

</html>

1、es5 使用回调函数

function moveTo(el,x,y,cb){  //四个参数分别为移动的元素、移动到对应的横纵坐标点，以及要移动完之后要调用的回调函数

    //cs3动画

    el.style.transform = `translate( ${x}px, ${y}px)`; //产生位移

    setTimeout(function(){

        cb && cb();

    },1000);

}

let el = document.querySelector('div');

document.querySelector('button').addEventListener('click', e => {

    moveTo(el,100,100,function(){

        moveTo(el,200,200,function(){

            moveTo(el,100,300,function(){

                moveTo(el,130,20,function(){

                    moveTo(el,0,0,function(){

                        console.log('移动结束！')

                    })

                })

            })

        })

    })

});

2、使用promise

//使用promise

function moveTo(el,x,y){

    return new Promise(resolve => {

        el.style.transform = `translate(${x}px,${y}px)`;

        setTimeout(function(){

            resolve(); //调用resolve()就是调用下面.then中的匿名函数

        },1000);

    });

}

let el = document.querySelector('div');

document.querySelector('button').addEventListener('click',e =>{

    moveTo(el,100,100)

        .then(function(){  //then方法接收一个参数，即匿名函数，对应到moveTp中的就是resolve()

            console.log('第一次移动');

            return moveTo(el,200,200);

        })

        /*

        //跟这样写没区别

        // .then(function(){

        //     console.log('第二次移动');

        //     console.log('第三次移动');

        // })

        */

        .then(function(){

            console.log('第二次移动');

        })

        .then(function(){

            console.log('第三次移动');

        });

});
then方法中也可以直接在后面继续调用then方法，如果then方法返回一个Promise的实例，那下一个then就会以上一个返回的Promise的实例去执行，否则可以理解为一个什么都没干的Promise，只是往下走而已。把它们放到一个then方法里是一样的，只不过在代码很多的时候把它们分到两个then方法里可以更清晰一些。

//实例化Promise构造函数时，传递一个函数，该函数有两个参数：resolve和reject(也是两个函数，名字可以随便取，就是两个函数，第一个函数是用来处理成功时的回调函数，第二个函数是用来处理失败时的回调函数)

//实例化后的Promise对象，具有then方法，then方法用来指定上述两个函数，resolve和reject；

//then()方法接受两个参数，1.第一个参数是状态切换为成功时的回调,

2.第二个参数是状态切换为失败时的回调。如果在then中不添加参数，那么就相当于没有调用任何回调函数

1、当只有一个参数的时候， 箭头函数的语法规定，可以省略括号直接写参数， 所以这里的resolve => 就等于（resolve） => 这种写法

2、这里的e代表事件对象， 可以打印一下查看结果

http://img.mukewang.com/climg/5d8871ed09d8910010580249.jpg

http://img.mukewang.com/climg/5d8871f60969c96a09090060.jpg

then方法中的function对应到promise中的resolve，调用resolve，就会调用then中的参数function：

Promise的构造函数接收一个参数，这个参数是一个函数，此函数可以传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数；

如果参数只有一个resolve的话，执行的是resolve方法，但是有时候参数是两个resolve，reject，这两个方法是Promise自带的。
主要看执行resolve方法，还是执行reject方法：

Promise的执行流程：

在return里的resolve，表示操作执行成功后的回调函数，意思是当函数加载成功才调用参数resolve在执行moveTo函数。

即当moveTo函数加载成功之后，返回一个promise实例。实例中调用resolve()，这时候再去执行moveTo函数中then方法。

ES6 promise的应用的更多相关文章

  1. 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

    Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...

  2. ES6 Promise 接口

    构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...

  3. Es6 Promise 用法详解

     Promise是什么??    打印出来看看  console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...

  4. ES6 Promise 全面总结

    转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...

  5. ES6 Promise 异步操作

    最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...

  6. 微信小程序Http高级封装 es6 promise

    公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是  数据请求! 看了下小程序的请求方式大概和a ...

  7. 解析ES6 Promise

    ES6 Promise 概念之类的,大概读者都应该有所知道,接下来我们直入终点. 先让我们来看看什么是Promise吧,他是一个object,类,arry,function? 首先,学习它的时候应该讲 ...

  8. jquery Promise和ES6 Promise的区别

    1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Defe ...

  9. ES6 Promise对象then方法链式调用

    then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数.then()方法会返回一个新的Promise实例,所以then()方法后面可以继 ...

  10. ES6 Promise(2)

    Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况.这种情况导致了回调金字塔的出现.不仅代码写起来费劲不美观,而且问题复杂的时候,阅读代码的人也难以理解. db.save( ...

随机推荐

  1. Lesson2 Thirteen equals one

    ​ Lesson2 Thirteen equals one equal ['i:kwəl] v. 等于 He equaled the world record. Nobody equals him i ...

  2. 简单快速安装Apache+PHP+MySql服务环境（三）—— 下载安装phpmyadmin

    为了方便在Linux上操作mysql数据库,打算安装一个phpmyadmin,不过在下载安装的过程中出现了一些坑,特此记录. 1. 在官网上下载phpmyadmin https://files.php ...

  3. P7473 [NOI Online 2021 入门组] 重力球

    P7473 [NOI Online 2021 入门组] 重力球 题意 给你一个正方形平面,某些位置有障碍,对于平面上两个球,每次你可以改变重力方向使两个球下落到最底端,求使两个球位置重合的最小改变重力 ...

  4. chcod炸弹

    [题目描述] 话说Cpp国和Pas国发生了战争, Pas国派出了强大的飞机战队, Cpp国于是使出了炸弹CHCOD 来反击Pas国的飞机舰队.然而CHCOD的发射器,只能逐渐往上打.所以Cpp国现在只 ...

  5. vulnhub-DC:3靶机渗透记录

    准备工作 在vulnhub官网下载DC:1靶机www.vulnhub.com/entry/dc-3,312/ 导入到vmware 导入的时候遇到一个问题 解决方法: 点 "虚拟机" ...

  6. JavaScript-编译与闭包

    编译原理 尽管 JavaScript 经常被归类为"动态"或"解释执行"的语言,但实际上它是一门编译语言.JavaScript 引擎进行的编译步骤和传统编译语言 ...

  7. 数据库之 MySQL

    MySQL简单入门 数据库这个概念想必大家都听说过,我在这里也简单介绍一下. 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.每个数据库都有一个或多个不同的 API 用于创建,访 ...

  8. Android开发音视频方向学习路线及资源分享，学完还怕什么互联网寒冬？

    接触Android音视频这一块已经有一段时间了,跟普通的应用层开发相比,的确更花费精力.期间为了学习音视频的录制,编码,处理也看过大大小小的几十个项目.总体感觉就是知识比较零散,对刚入门的朋友比较不友 ...

  9. 神奇的 SQL 之别样的写法 → 行行比较

    开心一刻 昨晚我和我爸聊天 我:"爸,你怎么把烟戒了,也不出去喝酒了,是因为我妈不让,还是自己醒悟,开始爱惜自己啦?" 爸:"儿子啊,你说的都不对,是彩礼又涨价了.&qu ...

  10. TCP可靠传输

    1. TCP 可靠性如何保证? 信道可靠:用三次握手.四次挥手保证连接正确: 数据正确:分区编号.校验和.超时重传: 传输控制:流量控制.拥塞控制 2. 重传机制 TCP可靠传输方式是序列号与确认应答 ...