我又又又回来了，最近真是累的跟狗一样，急需一个大保健回复一下子精力

　　　我现在是一边喝着红牛一边写着博客，好了好了，不扯了，回归整体好吧

　　　先简单来说一下啥是promise吧

　　　它是什么？Promise是一个方案，用来解决多层回调嵌套的解决方案。它现在是ES6的原生对象。

　　    干嘛用的？可以把一个多层嵌套的同步、异步都有回调的方法，给拉直为一串.then()组成的调用链。

　　　 解决啥问题？多层嵌套的回调方法中，如果同时存在同步、异步的方法，那么实际执行顺序会混乱。不好调试不好维护

　　　现在我们再来说一说自己写简单的promise的思路，我们是如何将异步函数同步执行的呢，正常情况下，我们只需要用函数

　　　嵌套就可以解决，但是现在我们要封装一个promise，那我们要怎么做呢，其实原理还是一样的，只要能在第一个函数执行完

　　　再调用下一个函数不就可以了嘛

　　　下面还是直接上代码

　　　

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

</head>

<body>

    <script>

        function MyPromise(func) {

            var self = this;

            var count = 0;

            this.cbklist = [];

            this.then = function (callback) {

                //将所有.then方法传进来的参数push到数组当中

                this.cbklist.push(callback);

                //能实现链式调用的关键

                return this;

            }

            this.success = function () {

                //使用递归调用自身

                if (count == self.cbklist.length) return;

                self.cbklist[count++](self.success);

            }

            //进来时调用第一个函数

            func(self.success);

        }

        // 下面是调用的例子

        function ajaxA(success) {

            setTimeout(function () {

                console.log("AAAAAAAAAA");

                success();

            }, 3000);

        }

        function ajaxB(success) {

            setTimeout(function () {

                console.log("BBBBBBBBBB");

                success();

            }, 2000);

        }

        function ajaxC(success) {

            setTimeout(function () {

                console.log("CCCCCCCCCC");

                success();

            }, 6000);

        }

        function ajaxD() {

            setTimeout(function () {

                console.log("DDDDDDDDD");

            }, 2000);

        }

        new MyPromise(ajaxA).then(ajaxB).then(ajaxC).then(ajaxD);

    </script>

</body>

</html>

　　

如何用原生JS实现一个简单的promise的更多相关文章

  1. 如何用原生js开发一个Chrome扩展程序

    原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...

  2. 原生 JS实现一个简单分页插件

    最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...

  3. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  4. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  5. 原生JS实现一个简单的前端路由（原理）

    说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例, 当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操 ...

  6. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  7. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  8. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  9. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

随机推荐

  1. appium定位之xpath定位

    前面也说过appium也是以webdriver为基的,对于元素的定位也基本一致,只是增加一些更适合移动平台的独特方式,下面将着重介绍xpath方法,这应该是UI层元素定位最强大的方法啦! 以淘宝app ...

  2. Javascript模式小记（一）

    js总是可以在不知不觉中地创建了全局变量,其原因在于JavaScript的两个特性. 1.JavaScript可直接使用变量,甚至无需声明: 2.JavaScript有个暗示全局变量的概念,即任何变量 ...

  3. 利用PHP扩展Taint找出网站的潜在安全漏洞实践

    一.背景 笔者从接触计算机后就对网络安全一直比较感兴趣,在做PHP开发后对web安全一直比较关注,2016时无意中发现Taint这个扩展,体验之后发现确实好用:不过当时在查询相关资料时候发现关注此扩展 ...

  4. TextView展示富文本时emoj或图片和文字不对齐的解决方案

    在项目中,回复框.聊天界面的显示往往会有emoj或者图片,但是一个比较头疼的问题是,会出现emoj表情或者图片和文字的位置不对齐,总是有偏移,这样很影响用户体验的.下面会总结一下如何解决这个问题. 本 ...

  5. Android OOM 引发的思考

    一.为何会出现OOM 因为Android系统的硬件资源是相当有限的,而且分配给一个应用的资源更为有限,尤其是内存.当应用突然申请的内存大于允许的最大值的时候,就会出现OOM. 如果想要获取App的内存 ...

  6. HTML+JS实现网站公告信息滚动显示

    一.可以直接使用marquee标签来实现 注意: 这个标签首先在早期的IE版本中加进来,后来逐渐被其他浏览器支持,W3C的不建议使用它. <marquee>在HTML和HTML5中都属于废 ...

  7. Git入门基础详情教程

    前言 写了一篇文章<一篇文章了解Github和Git教程>还觉得不错,继续写了<为了Github默默付出,我想了解你>,那么继续写Git 基础知识. Git 官网:https: ...

  8. 为网站添加emoji表情的支持

    项目框架 React.js + webpack + ES6 + Jquery 需求描述 使用客户端的用户常常喜欢发emoji表情,而在浏览器打开网页版的时候,emoji表情不能正常显示.在chrome ...

  9. Javascript百学不厌 - 尾递归

    虽然偶尔也用过,但是从来没具体来整理过 普通递归: function fac(n) { ) ; ); } fac() 这是个阶乘.但是占用内存,因为: fac(5) (5*fac(4)) (5*(4* ...

  10. 使用autogen工具生成Makefile遇到问题解决思路

    使用autogen工具生成Makefile,最新的应用程序很多都使用autogen,本着知行合一的精神 最近有空也研究了一下该工具的使用,详细步骤请参考文档: http://blog.csdn.net ...