js异步编程小技巧详解


Posted in Javascript onAugust 14, 2017

异步回调是js的一大特性,理解好用好这个特性可以写出很高质量的代码。分享一些实际用的一些异步编程技巧。

1.我们有些应用环境是需要等待两个http请求或IO操作返回后进行后续逻辑的处理。而这种情况使用回调嵌套代码会显得很难维护,而且也没有充分使用js的异步优势。

看下实例(为了大家容易理解使用了jq作为示例)

$.get("获取数据1.html",function(data,status){
   $.get("获取数据2.html",function(data1,status1){
    //使用 data 和data1逻辑
  });
 });

这种代码明显需要等待上个ajax请求返回后才会进行第二个请求,效率很低,而且回调嵌很不利于逻辑。我们可以使用计数器的方式,每完成一个请求计数器加1 当计数器等于2时执行回调逻辑

var get_data
var get-data1
function next(){
  //使用 data 和data1逻辑
}
$.get("获取数据1.html",function(data,status){
  get_data=data
  (++over === all) && (next());
 });
$.get("获取数据2.html",function(data1,status1){
  get_data1=data1
  (++over === all) && (next());
   
});

这种方式两个http并行发送,极大的提高了效率

Javascript 相关文章推荐
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 #Javascript
使用yeoman构建angular应用的方法
Aug 14 #Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 #Javascript
使用D3.js制作图表详解
Aug 13 #Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 #Javascript
react开发教程之React 组件之间的通信方式
Aug 12 #Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 #Javascript
You might like
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
浅谈php://filter的妙用
2019/03/05 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
使用ECharts实现状态区间图
2018/10/25 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
Vue使用NProgress进度条的方法
2019/09/21 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python实现得到一个给定类的虚函数
2014/09/28 Python
python实现的简单文本类游戏实例
2015/04/28 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
使用python接入微信聊天机器人
2020/03/31 Python
如何写python的配置文件
2020/06/07 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
酒店保洁主管岗位职责
2013/11/28 职场文书
大学运动会通讯稿
2014/01/28 职场文书
接待员岗位责任制
2014/02/10 职场文书
小学元宵节活动总结
2015/02/06 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS