js中的回调函数 和promise解决异步操作中的回调地狱问题。
回调函数 : 函数作为参数传递到另外一个函数中。简单数据类型和引入数据类型中的数组和对象作为参数传递大家肯定都不陌生,其实引用数据类型中的函数也是可以的。 事实上大家见到的很多,用到的也很多,比如jQuery中的一些事件,定时器。这些呢都是别人搞好的,大家直接用,所以就没有太在意。 /注意到click方法中是一个函数而不是一个变量 //它就是回调函数
$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});
它也是回调函数
setInterval(function(){
console.log('回调函数')
})
回调函数是如何运作的呢?
我们把一个函数传入,那么这个函数什么时候执行,执行的条件是什么?
这个是由被调用的函数决定的,被调用函数可以在一个适当的条件去触发这个回调函数,
比如上诉点击事件,什么时候触发这个函数呢?那就是点击的时候,其实jQuery封装的时候,也可以函数调用的时候立马执行,也可以把传入的函数放入定时器,间隔一段事件执行,
那么这些毫无意义嘛!!!总之就是传入的这个函数执行条件,时间,同步或异步都可以随意控制,很强大。 回调函数其实也是闭包:
如何理解这个呢? 当我们把这个函数当参数传递到其他函数时候,那么其实会形成闭包的。大家想想闭包的概念,内部函数应用外包函数变量。当然其实传入的函数也不一定非要应用外部函数的变量。
function fn(id, check) {
info = {
id: id
}
console.log(id)
check(info)
} fn(1, function(data) {
console.log(data)
}) 上面是我写的一个简单的回调函数,当然没有任何意义啊,只是写出来便于看的,
其实上溯回调函数中还涉及到一个回调函数传值问题,fn函数调用的时候传入一个函数,这个函数调用时候,其实有一个传值问题
1传到上诉fn函数中,fn函数中的info同时也传到了fn调用中的data。 回调函数不好的影响:回调地狱
var p_client = new Db('integration_tests_20', new Server("127.0.0.1", 27017, {}), {'pk':CustomPKFactory});
p_client.open(function(err, p_client) {
p_client.dropDatabase(function(err, done) {
p_client.createCollection('test_custom_key', function(err, collection) {
collection.insert({'a':1}, function(err, docs) {
collection.find({'_id':new ObjectID("aaaaaaaaaaaa")}, function(err, cursor) {
cursor.toArray(function(err, items) {
test.assertEquals(1, items.length); // Let's close the db
p_client.close();
});
});
});
});
});
}); 上溯是随便拷贝的回调函数代码,这个是不是特别难看,而且不利于代码维护,如何解决这个问题呢?es6提供了解决方案,promise解决回调函数问题。 接下类在聊聊promise的使用吧。推荐大家可以看一看阮一峰的一片文章,什么文章我也不知道,但是你百度搜索:阮一峰es6。 为什么会有promise? 之前大家解决异步事件都是用回调函数去解决,就是说,写异步事件用回调函数去写。但是回调函数写异步会出现一些问题,
回调地狱的问题,上诉代码大家可以看到的。那么promise就是一种新的处理异步的方法,可以完美的解决回调函数处理异步带来的问题,回调地狱问题。
其实promise就是异步操作的方法,就像之前的定时器一样,看到定时器就知道这是异步操作,同样,看到promise就知道这个是异步操作。 什么是promise?
promise是一个构造函数 首先要构建一个promise对象
const promise = new Promise() 那马儿promise对象就建立好了 const promise = new Promise(function(resolve, reject) {
// ... some code if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
}); new promise 传入的参数一个是函数,函数中还有两个参数,这两个是函数,就是回调函数,什么时候执行呢?成功会执行resolved函数,失败执行reject函数,
成功时候可以传入参数,失败的时候也可以传入参数,value和error就是传入的参数,这两个参数可以通过promise .then和.catch方法绑定的函数中去获取,
成功的时候同时会调用.then方法并且把成功的参数传入到.then方法绑定的函数中去。.catch同理会这样。 、下面简单写了一个demon
var i = 1 function promise() {
const promise = new Promise(function(resolved, reject) { if (i === 1) {
resolved(i)
} else {
reject(1)
}
})
return promise
} console.log(23)
promise().then(function(value) {
console.log(value)
}).catch(function(value) {
console.log(value)
})
console.log(32)
js中的回调函数 和promise解决异步操作中的回调地狱问题。的更多相关文章
- jquery.Deferred promise解决异步回调
我们先来看一下编写AJAX编码经常遇到的几个问题: 1.由于AJAX是异步的,所有依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套,ajax等异步操作越多,嵌套层次就会越 ...
- js中如何在一个函数里面执行另一个函数
1.js中如何在函数a里面执行函数b function a(参数c){ b(); } function b(参数c){ } 方法2: <script type="text/javasc ...
- underscore.js中的节流函数debounce及trottle
函数节流 throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...
- JavaScript -- 时光流逝(七):js中的全局函数
JavaScript -- 知识点回顾篇(七):js中的全局函数 全局函数可用于所有内建的 JavaScript 对象. (1) encodeURI():把字符串编码为 URI. <script ...
- js中的匿名函数和匿名自执行函数
1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: <input type="button" value="点击" id ...
- JS中关于把函数作为另一函数的参数的几点小总结
//JS中关于把函数作为函数的参数来传递的问题的小总结//第一,最简单的形式无参函数,直接形式函数的函数名放到括号中,再在执行部分这个函数即可.//当然调用时要穿另一个真正的定义好的函数/*funct ...
- js中的Generators函数
js中的Generators函数 generator一般操作 generator函数的作用就是函数体分段执行,yield表示分隔点 function *test() { console.log(1); ...
- js中回调函数,promise 以及 async/await 的对比用法 对比!!!
在编程项目中,我们常需要用到回调的做法来实现部分功能,那么在js中我们有哪些方法来实现回调的? 方法1:回调函数 首先要定义这个函数,然后才能利用回调函数来调用! login: function (f ...
- 关于jquery.unobtrusive-ajax.js 回调函数无效 的解决办法
今天新项目的时候写MVC的时候使用到了Ajax.BeginForm,发现它的回调函数怎么都不响应,最后在网上查找了相关资料跟自己写的一些代码测试, 总算找到了原因:jquery.unobtrusive ...
随机推荐
- JavaScript数组方法--filter、find、findIndex
继续数组方法,今天应该到filter了. filter:filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素. 使用: var words = ['spray', 'lim ...
- 使用Pycharm创建Django项目
一.安装django pip install django 二.创建空django项目 选择New Project...打开创建项目向导. 成功创建一个空Django项目. 创建好的项目可以看到,已经 ...
- JavaScript代理模式
代理模式的定义,代理是一个对象(proxy)用它来控制目标对象的访问.为此他要是先与目标对象相同的接口,但是他不同于装饰者模式,它对目标对象不进行任何修改,它的目的在于延缓"复杂" ...
- mysql 5.5数据导入5.7 Failed - Error on Table user - 1067 - Invalid default value for 'CREATE_date'
表结构是这样 DROP TABLE IF EXISTS `user`;CREATE TABLE `user` (....省略了一些无关紧要的字段 `CREATE_DATE_` timestamp NO ...
- 一些常见的Java面试题 & 面试感悟
< 前言 > 近期在面试,深感这个行业的浮躁,一些菜不辣基的弱鸡开出的工资待遇要求,超过了我.不知道他们是怎么拿到那么高的工资的,难道是他在公司有亲戚朋友吗?有后台吗?是行业热钱真的过多了 ...
- 基础Gan代码解析
initializer总结: #f.constant_initializer(value) 将变量初始化为给定的常量,初始化一切所提供的值. #tf.random_normal_initializer ...
- 2018-2019-2 网络对抗技术 20165304 Exp2 后门原理与实践
后门的基本概念及实验内容 常用后门工具 netcat Win获得Linux Shell Linux获得Win Shell Meterpreter 实验内容 任务一:使用netcat获取主机操作Shel ...
- 盘点一下Github上开源的Java面试/学习相关的仓库,看完弄懂薪资至少增加10k
最近浏览 Github ,收藏了一些还算不错的 Java面试/学习相关的仓库,分享给大家,希望对你有帮助.我暂且按照目前的 Star 数量来排序. 本文由 SnailClimb 整理,如需转载请联系作 ...
- MM-移动类型
链接:SAP移动类型 移动类型 备注 业务类型 SAP中事务代码 备注 101 采购订单收货.生产订单收货 收货 migo CO11N顶层处理移动类型\跨工厂收货 102 采购订单收货冲销 收货 ...
- 1.Sed | Awk | Grep | Find
1.Sed | Awk | Grep | Find 可以参考的文档链接 CentOS7 查看 当前机器 已经启动的端口的Shell命令: netstat -lntup | awk -F' ' {'pr ...