javascript异步处理与Jquery deferred对象用法总结


Posted in jQuery onJune 04, 2019

本文实例讲述了javascript异步处理与Jquery deferred对象用法。分享给大家供大家参考,具体如下:

这是项目组老大整理的一些关于jquery 异步处理请求,以及使用 jquery deferred 对象的一些常见方法。虽然是项目上总结出来的。但也比较通用,分享在这里。

  • 所有的Ajax操作都采用异步处理。
  • 采用Jquery的Deffered对象来处理异步调用。
  • 因为是异步调用,所以$.Ajax函数的返回值不代表返回的结果,只是一个Deffered对象。
  • Ajax调用完成后执行的逻辑可以写成函数作为参数传递给Deffered对象的done(), fail(), always()函数来执行。
  • 如果一个函数包含Ajax调用,那么这个函数必须将Ajax返回的异步对象作为自己的返回值,否则函数的调用者无法保证后续代码的正常执行顺序。

例如:

function readData(){
  $.ajax({ url:"test", dataType:"json" })
  .done(function() {
    //....
  });
}
readData();
//...这里想添加一些后续处理,但程序将在Ajax回调前执行,所以无法达到预期目的
正确的代码:
function readData(){
  return $.ajax({ url:"test", dataType:"json" })
  .done(function() {
    //....
  });
}
readData().done(function () {
  //...想添加的后续处理可以加在这里处理
});
  • 如果需要调用多个Ajax请求,请注意Ajax请求是否可以同时进行,如果可以应该使用when()函数来同时执行,以提高程序的运行效率和可读性。
  • deferred对象有一个方法promise(),可以阻止其他代码修改deferred对象的状态,也就是其他代码调用reslove()reject()无效。
var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
  var tasks = function(){
    alert("执行完毕!");
    dtd.resolve(); // 改变Deferred对象的执行状态
  };
  setTimeout(tasks,5000);
  return dtd;
};
wait(dtd)
.done(function(){ alert("成功了!"); })
.fail(function(){ alert("出错啦!"); });
dtd.resolve();  //这里修改了dtd对象的状态,导致立刻出现“成功了!”的提示

正确的例子:

var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
  var tasks = function(){
    alert("执行完毕!");
    dtd.resolve(); // 改变Deferred对象的执行状态
  };
  setTimeout(tasks,5000);
  return dtd.promise(); // 返回promise对象
};
wait(dtd)
.done(function(){ alert("成功了!"); })
.fail(function(){ alert("出错啦!"); });
dtd.resolve();  //这里修改dtd对象的状态无效
  • 一些情况的处理:

1.嵌套异步操作的处理。

如果一个函数内部执行异步任务,并且在异步任务的done回调内会嵌套另一个异步任务,那么简单返回第一个异步任务的返回值是不行的,需要另外自行定义一个Deferred对象作为返回值。

function loadComponent(id){
  var dtd = $.Deferred();
  //loadScript将异步加载一个js文件,所以返回值是一个Deffered对象
  return loadScript(id)
  .done(function() {
    //js加载后,触发component的load事件,此事件内将使用Ajax获取页面模板和数据,生成最终的html
    app.getComponent(id).trigger("load")
    .done( function(){
      dtd.reslove(agruments);
    }).fail( function(){
      dtd.reject(agruments);
    });
  });
  //返回自定义的dtd对象,才能保证返回值的done回调在load事件完成后执行
  return dtd;
}

2.一个函数内同时包含同步和异步case的处理。

/* 这个函数返回一个异步对象,当异步对象执行done时,表示component被加载完成 */
function requireComponent(id){
  if (this.components[id]){
    //如果component已经被加载,直接返回一个reslove的异步对象,否则返回值内容与else分支不同,后续代码难以处理
    var dtd = $.Deferred();
    dtd.reslove(this.getComponent(id));
    return dtd;
  }
  else{
    //如果component未被加载,loadScript将异步加载JavaScript并执行,然后将被加载的component放入this.components
    return loadScript(id);
  }
}
  • Jquery异步模型有一个缺点,就是缺乏类似wait操作的处理能力,如果多个异步调用要顺序发生时,就要在done里面嵌套处理,影响代码可读性.
aSyncTask1.done( function () {
  //...第一个操作完成后的处理
  asyncTask2.done( function () {
    //...第二个操作完成后的处理
    asyncTask3.done( function () {
      //...第三个操作完成后的处理
    });
  })
})

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery append与appendTo方法比较
May 24 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
一文快速了解JQuery中的AJAX
May 31 #jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 #jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 #jQuery
jquery操作select常见方法大全【7种情况】
May 28 #jQuery
jQuery实现高级检索功能
May 28 #jQuery
You might like
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
PHP时间处理类操作示例
2018/09/05 PHP
javascript 函数速查表
2010/02/07 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
详解JS函数重载
2014/12/04 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
python之Socket网络编程详解
2016/09/29 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
用python写测试数据文件过程解析
2019/09/25 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
python如何处理程序无法打开
2020/06/16 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
生物化学研究助理员求职信
2013/10/09 职场文书
四年级评语大全
2014/04/21 职场文书
协议书格式
2014/04/23 职场文书
说明书范文
2014/05/07 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript