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常见的面试题（二）

    1.mybatis 中 #{}和 ${}的区别是什么? #{}是预编译处理,${}是字符串替换: Mybatis在处理#{}时,会将sql中的#{}替换为?号,调用PreparedStatement的 ...

  2. Guass消元总结

    Guass消元 约旦·高斯消元法 求线性方程组 我们用一个\(n*(n+1)\)的矩阵存储线性方程组各项系数和零次项系数. 每一次找到一个未知数系数最大的方程,交换当前行方程和该方程,并将其他行该未知 ...

  3. 并发队列ConcurrentLinkedQueue与LinkedBlockingQueue源码分析与对比

    目录 前言 ConcurrentLinkedQueue 使用方法 存储结构 初始化 入队 出队 获取容器元素数量 LinkedBlockingQueue 使用方法 存储结构 初始化 入队 出队 获取容 ...

  4. jquery版本更新后无live函数的处理.TypeError: $(...).live is not a function

    jquery live函数语法 jquery版本更新, 发现一个问题: jq自带的live没有了.控制台下会有如下的提示:火狐: TypeError: $(...).live is not a fun ...

  5. java类与对象基础篇

    java面向对象基础篇 面向对象程序设计(Object Oriented Proframming ,OOP) 面向对象的本质是:以类的方式组织代码,以对象的方式组织(封装)数据. 面向对象的核心思想是 ...

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

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

  7. Salesforce Integration 概览(六) UI Update Based on Data Changes（UI自动更新基于数据变更）

    Salesforce用户界面必须由于Salesforce数据的更改而自动更新.这个场景其实在我所经历的项目中用到的不是特别多,因为客户可能直接点击刷新按钮就直接看到了最新的数据,而不是那种一直不刷新然 ...

  8. IDEA永久使用！！(很全)

    IDEA虽然好用,但是下载后只能试用30天,烦恼呀!所以今天就带来IDEA的激活版来帮助大家摆脱30天的苦恼! 准备工作: 破解所需要的软件和jar都在网盘里,需要的自行下载,在这里idea安装就不带 ...

  9. Java之Cookie与Session

    Cookie.Session Cookie:服务端生成Cookie发给客户端用于认证 Session:服务端进行进行登记,每人有不同的Session session与cookie的区别 Cookie: ...

  10. SeacmsV10.7版代码审计笔记

    data: 2020.11.9 10:00AM description: seacms代码审计笔记 0X01前言 seacms(海洋cms)在10.1版本后台存在多处漏洞,事实上当前最新版V10.7这 ...