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. MySQL中的redo log和undo log

    MySQL中的redo log和undo log MySQL日志系统中最重要的日志为重做日志redo log和归档日志bin log,后者为MySQL Server层的日志,前者为InnoDB存储引擎 ...

  2. 一张图概括mysql的各种join用法

  3. Linux服务系统申请SSL证书方法

    inux主要面向专业性较强的技术人员,如果是WEB站点通常采取PHP语言为主选,可选的服务器环境中有Apache.Nginx.Tomcat这几类为主的框架环境,有的图方便会用一些可视化一键式的控制面板 ...

  4. [XIN算法应用]NOI2020美食家

    XIN(\(updated 2021.6.4\)) 对于很多很多的题目,发现自己并不会之后,往往会直接冲上一个XIN队算法,然而,这样 \(\huge{\text{鲁莽}}\) 的行为只能获得 TLE ...

  5. nexus 私服 设置本公司代理 记录

    index成功

  6. vue.js 贡献指南(翻译)

    Vue.js Contributing Guide vue 2.x 嗨! 我很高兴你有兴趣为Vue.js做贡献. 在提交您的贡献之前,请务必花点时间阅读以下指南. 行为守则 问题报告指南 PR指南 开 ...

  7. linux ifconfig不可用

    Q: A: 源出问题,修改源:进入源:源地址 /etc/apt/ sudo vi sources.list,将下列内容替换sources.list中的内容,并保存 deb http://mirrors ...

  8. PHP-CGI远程代码执行漏洞（CVE-2012-1823）

    影响版本 php < 5.3.12 or php < 5.4.2 访问http://p:8080/index.php?-s即爆出源码,说明漏洞存在 POST /index.php?-d+a ...

  9. LeetCode通关：求次数有妙招，位运算三连

    分门别类刷算法,坚持,进步! 刷题路线参考: https://github.com/chefyuan/algorithm-base 大家好,我是刷题困难户老三,这一节我们来刷几道很有意思的求次数问题, ...

  10. Dubbo 实现一个Load Balance (用于灰度发布)

    Dubbo 可以实现的扩展很多, 官方文档在这: https://dubbo.apache.org/zh/docs/v2.7/dev/impls/ (太简单了....) 下面我们实现一个Load Ba ...