JavaScript中的回调地狱及解决方法
JavaScript中的回调地狱及解决方法
1、回调地狱
在使用JavaScript时,为了实现某些逻辑经常会写出层层嵌套的回调函数,如果嵌套过多,会极大影响代码可读性和逻辑,这种情况也被成为回调地狱。比如说你要把一个函数 A 作为回调函数,但是该函数又接受一个函数 B 作为参数,甚至 B 还接受 C 作为参数使用,就这样层层嵌套,人称之为回调地狱,代码阅读性非常差。比如:
var sayhello = function (name, callback) {setTimeout(function () {console.log(name);callback();}, 1000);
}
sayhello("first", function () {sayhello("second", function () {sayhello("third", function () {console.log("end");});});
});
//输出: first second third end
2、解决回调地狱
解决回调地狱有很多方法,比如:Promise 对象、Generator 函数、async 函数
3、Promise 对象解决回调地狱
采用链式的 then,可以指定一组按照次序调用的回调函数。这时,前一个 then 里的一个回调函数,返回的可能还是一个 Promise对象(即有异步操作),这时后一个回调函数,就会等待该 Promise对象的状态发生变化,才会被调用。由此实现异步操作按照次序执行。
var sayhello = function (name) {return new Promise(function (resolve, reject) {setTimeout(function () {console.log(name);resolve(); //在异步操作执行完后执行 resolve() 函数}, 1000);});
}
sayhello("first").then(function () {return sayhello("second"); //仍然返回一个 Promise 对象
}).then(function () {return sayhello("third");
}).then(function () {console.log('end');
}).catch(function (err) {console.log(err);
})
//输出:first second third end
上面代码中,第一个 then 方法指定的回调函数,返回的是另一个Promise对象。这时,第二个then方法指定的回调函数,就会等待这个新的Promise对象状态发生变化。如果变为resolved,就继续执行第二个 then 里的回调函数
4、Generator 函数
// 用 co 模块自动执行
var co = require('co');
var sayhello = function (name, ms) {setTimeout(function (name,ms) {console.log(name);}, ms);
}var gen = function* () {yield sayhello("xiaomi", 2000);console.log('frist');yield sayhello("huawei", 1000);console.log('second');yield sayhello("apple", 500);console.log('end');
}
co(gen());
本文参考https://www.cnblogs.com/wenxuehai/p/10455664.html#_label0
JavaScript中的回调地狱及解决方法相关推荐
- 回调函数与回调地狱及其解决方法 | JavaScript
JavaScript中的回调函数与回调地狱及其解决方法 以下为整理的思维导图 图片版+文字版 文末附有参考文章链接 知识点思维导图版 一.什么是回调函数 1.MDN的定义 回调函数是作为参数传给另一个 ...
- JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题的解决方法
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题的解决方法 参考文章: (1)JS IOS/iPhone的Safari浏览器不兼容Javascript中的D ...
- 理解javascript中的回调函数(callback)【转】
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
- 理解javascript中的回调函数(callback)
理解javascript中的回调函数(callback) 在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Obje ...
- 在JavaScript中重复字符串的三种方法
In this article, I'll explain how to solve freeCodeCamp's "Repeat a string repeat a string" ...
- android百度地图覆盖物异步加载图片,Android 百度地图marker中图片不显示的解决方法(推荐)...
目的: 根据提供的多个经纬度,显示所在地的marker样式,如下: 问题: 1.发现marker中在线加载的图片无法显示出来: 2.获取多个对象后,却只显示出了一个marker: 以下为官网实现方法: ...
- 在JavaScript中反转字符串的三种方法
This article is based on Free Code Camp Basic Algorithm Scripting "Reverse a String" 本文基于F ...
- 中单引号怎么转义_在JavaScript中组合字符串的4种方法
下面是在JavaScript中组合字符串的4种方法.我最喜欢的方法是使用模板字符串.为什么?因为它更具可读性,所以没有转义引号的反斜杠,没有笨拙的空格分隔符,也没有混乱的加号操作符 . const i ...
- 移动端网页布局中需要注意事项以及解决方法总结
移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉 <meta name=&qu ...
最新文章
- ASA与PIX的区别
- MAP 最大后验——利用经验数据获得对未观测量的点态估计
- SElinux测试及排错
- 女人必知:10个好习惯 让老公不想出轨
- web开发环境_Web开发人员的开发环境
- 计算机在材料科学中的应用上机二,计算机在材料科学中的应用-上机实验二.doc...
- linux下软件包清理,Linux运维知识:如何清理Linux系统中的孤立、无用的软件包
- jQuery移出style
- 苹果推出Find My Friends好友追踪iOS应用
- 【动态规划】区间dp: P1063能量项链
- python转行符-python实现readline去掉换行符
等特殊字符
- 扣丁三国 - 技术支持
- 吃鸡ios和android灵敏度,吃鸡手游pc版怎么调灵敏度参数教程 | 手游网游页游攻略大全...
- Apache-DBUtils实现CRUD操作
- 四/六层板层叠设计思路
- k3s部署思源并用流水线同步笔记
- Android中,长度单位详解(dp、sp、px、in、pt、mm)具体解释与换算(1)
- Audified U73b 复古压缩器评测:带来复古温暖的色彩
- 如何查询自己的个人征信报告
- 图像生成论文阅读:GLIDE算法笔记