js异步编程小技巧详解

 更新时间:2017年08月14日 08:43:23   作者:moonpanda   我要评论
这篇文章主要介绍了js异步编程技巧,使用计数器的方式,每完成一个请求计数器加1 当计数器等于2时执行回调逻辑,两个http并行发送,从而极大的提高了效率,需要的朋友可以参考下

异步回调是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实现打字效果的方法

    JavaScript实现打字效果的方法

    这篇文章主要介绍了JavaScript实现打字效果的方法,可实现文字陆续出现的打字效果,涉及javascript时间函数及页面元素获取的相关技巧,需要的朋友可以参考下
    2015-07-07
  • JS小游戏之宇宙战机源码详解

    JS小游戏之宇宙战机源码详解

    这篇文章主要介绍了JS小游戏之宇宙战机源码,是一款非常经典的游戏源码,包含了游戏设计中比较常见的逻辑处理,本文附带了该游戏的完整源码,需要的朋友可以参考下
    2014-09-09
  • js图片自动切换效果处理代码

    js图片自动切换效果处理代码

    自己设置每张图片切换的时间间隔,自己设置每张图片的路径(绝对、相对路径都可以)虽然很简单,但是很实用
    2013-05-05
  • javascript检查某个元素在数组中的索引值

    javascript检查某个元素在数组中的索引值

    在js中提供数据查找了函数有很多,但我查找了很久都没有能实现我要的方法,后来发现可以使用indexOf函数来实现查找与定位数组元素索引值的具体方法,各位朋友可参考
    2016-03-03
  • 详解js常用分割取字符串的方法

    详解js常用分割取字符串的方法

    这篇文章主要介绍了js常用分割取字符串的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • js自定义input文件上传样式

    js自定义input文件上传样式

    这篇文章主要为大家详细介绍了js自定义input文件上传样式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • Javascript让DEDECMS告别手写Tag

    Javascript让DEDECMS告别手写Tag

    dedecms在编辑修改内容时,TAG标签需要手动输,中文的Tag, 中间还得用半角字符','分隔, 输入法切来切去很不方便, 于是动手改后台代码, 利用后台的tags_main.php, 让dedecms添加内容时能去tags_main里去选择.
    2014-09-09
  • JS动态加载脚本并执行回调操作

    JS动态加载脚本并执行回调操作

    这篇文章主要为大家详细介绍了JS动态加载脚本并下载完成后执行回调操作,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 谈谈JavaScript的New关键字

    谈谈JavaScript的New关键字

    这篇文章主要和大家聊一聊JavaScript的New关键字,一般我们通过New关键字来创建一个类的实例对象,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • js实现文本框只允许输入数字并限制数字大小的方法

    js实现文本框只允许输入数字并限制数字大小的方法

    这篇文章主要介绍了js实现文本框只允许输入数字并限制数字大小的方法,涉及javascript对字符串正则判断及数值大小判断的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08

最新评论