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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
开门红主持词
2014/04/02 职场文书
经典毕业生求职信
2014/07/12 职场文书
收款委托书范本
2014/09/11 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python