如何用原生JS实现一个简单的promise
我又又又回来了，最近真是累的跟狗一样，急需一个大保健回复一下子精力
我现在是一边喝着红牛一边写着博客，好了好了，不扯了，回归整体好吧
先简单来说一下啥是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的更多相关文章
- 如何用原生js开发一个Chrome扩展程序
原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...
- 原生 JS实现一个简单分页插件
最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- 原生js实现一个简单的倒计时功能
大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...
- 原生JS实现一个简单的前端路由（原理）
说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例, 当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操 ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
随机推荐
- [wxgl] load image fail
微信小游戏 let loader = new THREE.TextureLoader() let texture = loader.load('./images/bullet.png') 报错 参考 ...
- Javascript高级编程学习笔记（5）—— JS操作符
话不多说,开始今天的码字之旅. 突然有种日更小说的感觉,emm... 操作符 ECMAScript(JS核心)描述了一组用于操作数据值的操作符,也包括算术操作符等等 而JS中这些操作符最鲜明的特点就是 ...
- Java 实现网络图片的读取与下载
//网络图片的下载,读取与删除 public static void fileDowAndDel(String httpurl){ try { URL url = new URL(httpurl); ...
- 第二十九节：Java基础知识-类，多态，Object，数组和字符串
前言 Java基础知识-类,多态,Object,数组和字符串,回顾,继承,类的多态性,多态,向上转型和向下转型,Object,数组,多维数组,字符串,字符串比较. 回顾 类的定义格式: [类的修饰符] ...
- 第十八节：详解Java抽象类和接口的区别
前言 对于面向对象编程来说,抽象是它的特征之一. 在Java中,实现抽象的机制分两种,一为抽象类,二为接口. 抽象类为abstract class,接口为Interface. 今天来学习一下Java中 ...
- Testing - 软件测试知识梳理 - 相关词汇
测试策略 描述测试工程的总体方法和目标:根据测试需求,描述在什么测试阶,依据什么测试要素和目标,进行什么种类的测试,使用什么样的测试方法和工具. 测试策略的制定主要包含如下内容: 确定测试过程要使用的 ...
- 机器学习技法笔记：16 Finale
Roadmap Feature Exploitation Techniques Error Optimization Techniques Overfitting Elimination Techni ...
- vue 项目记录.路飞学城(一)
前情提要: 通过vue 搭建路飞学城记录 一:项目分析 二:项目搭建 1:创建项目 vue init webpack luffy 2:初始化项目 清除默认的HelloWorld.vue组件和APP. ...
- 解决Eclipse中DDMS一直打印输出Connection attempts的问题
Eclipse/MyEclipse出现以下错误的解决方案: [2015-01-25 16:10:29 - DeviceMonitor] Adb connection Error:远程主机强迫关闭了一个 ...
- 理解数据库连接池和ThreadLocal实现的事务控制
我发现 不少人 误解了这两者. csdn上也有人提出过这种疑问: http://bbs.csdn.net/topics/250061733 经过查阅资料和认真分析,我特说明一下这两者概念上的区别. 我 ...