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. Java 比较两个Word文档差异

    本文介绍使用Spire.Doc for Java的比较功能来比较两个相似Word文档的差异.需要使用的版本为3.8.8或者后续发布的新版本.可下载jar包,解压将lib文件夹下的Spire.doc.j ...

  2. PHP获取当日或本月时间戳范围

    在mysql数据库中使用int类型保存时间戳时,一般在程序中可能会用到统计当日,当月的一些数据.那么可以用如下的方式限定时间范围:   //当日销售 $today_start = strtotime( ...

  3. 新iPhone有望加入指纹解锁，你会买吗？

    苹果新款iPhone即将在9月份正式发布,或命名为iPhone 13或者iPhone 12s.据外媒报道,新一代iPhone的屏幕和相机都将迎来重大升级,同时还将首次加入屏下指纹解锁技术.你期待吗? ...

  4. AntDesignBlazor 学习笔记

    AntDesignBlazor是基于 Ant Design 的 Blazor 实现,开发和服务于企业级后台产品.我的 Blazor Server 学习就从这里开始,有问题可以随时上 Blazor 中文 ...

  5. 【搜索】单词接龙 luogu-1019

    题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在"龙" ...

  6. 第九篇 -- 对数据库mysql进行连接并压测（二）

    上一节介绍了对mysql查询语句的压测,这一节来进一步的了解. 还是先把数据库的图放上来. 接下来打开Jmeter. 1. 回顾一下上一节学的查询语句 JDBC Request配置 结果 2. 条件查 ...

  7. 添加底部导航栏tabbar

    效果图: 如果要添加底部导航栏,最少2个,最多5个. app.json { "pages": [ "pages/index/index", "page ...

  8. 货币兑换问题（动态规划法）——Python实现

      # 动态规划法求解货币兑换问题 # 货币系统有 n 种硬币,面值为 v1,v2,v3...vn,其中 v1=1,使用总值为money的钱与之兑换,求如何使硬币的数目最少,即 x1,x2,x3... ...

  9. 卷积的等变性(equivariant) / 不变性(invariant）

    不变性:输入x发生变换,但是F之后的输出不变 \(F(x)=F [\)transform\((x)]\) 池化:近似不变性,当图像发生微小变化,最大池化的输出不变,还是一个池化范围内的max 等变性: ...

  10. git分支merge冲突 error: you need to resolve your current index first

    问题: 执行切换代码分支 git checkout featrue_2019-06-24 ,报错如下: error: you need to resolve your current index fi ...