华山资源网

jQuery中的deferred使用方法
网络编程 2024/11/18 佚名
3 1

deferred简介

deferred对象是jQuery的回调函数解决方案，jQuery之前的版本中异步回调这块做的不是很好，所以后期补上了该解决方案。

jQuery中的deferred使用方法

普遍的ajax操作方式

我们先来回顾一下jQuery中普通的ajax操作

$.ajax({
 url: 'test.html',
 success: function (res) {
 console.log('数据读取成功');
 },
 error: function () {
 console.log('数据读取失败');
 }
});

1.5版本后的新写法如下：

$.ajax('test.html').done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
});

新版本的写法相比老版本有一个优势，就是可以自由添加多个回调函数并且按照添加顺序执行：

$.ajax('test.html').done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
}).done(function (res) {
 console.log('这是第二个成功的回调函数');
});

为多个ajax指定回调函数

我们可以通过when方法，为多个事件指定一个回调函数

$.when($.ajax('test.html'), $.ajax('test2.html')).done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
});

为普通函数指定回调函数

前面说到的when是用于ajax方法，而ajax其实是deferred对象，如果不是ajax对象，换成普通的函数呢，直接使用when是不会有效果的，会直接执行done方法

所以我们需要手动新建一个deferred对象

var defer = $.deferred(); //新建一个deferred对象
var wait = function (defer) {
 var tasks = function () {
  console.log('执行完毕！');
  defer.resolve(); //改变deferred对象的执行状态 - 成功
 };
 setTimeout(tasks, 5000);
 return defer;
};

这里的resolve就是触发done的，对应的reject方法则是用来调用fail方法的。

var defer = $.deferred(); //新建一个deferred对象
var wait = function (defer) {
 var tasks = function () {
  console.log('执行完毕！');
  defer. reject(); //改变deferred对象的执行状态 - 失败
 };
 setTimeout(tasks, 5000);
 return defer;
};

执行方法

$.when(wait(defer)).done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
});

进一步优化

上面的代码还有一些问题，defer是暴露在全局的，所以我们是可以通过在全局进行defer.resolve()来提前回调。

为了避免这种情况，jQuery提供了deferred.promise()方法，它的作用是在原来的deferred对象上返回另一个deferred对象，后者只开放与改变执行状态无关的方法（比如done方法和fail方法）屏蔽与改变执行状态有关的方法（比如resolve和reject方法）。

var defer = $.deferred(); //新建一个deferred对象
var wait = function (defer) {
 var tasks = function () {
  console.log('执行完毕！');
  defer.resolve(); //改变deferred对象的执行状态 - 成功
 };
 setTimeout(tasks, 5000);
 return defer.promise();
};
$.when(wait(defer)).done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
});

也可以把defer包在函数中

// 普通方法
var wait = function () {
 var defer = $.deferred(); //新建一个deferred对象
 var tasks = function () {
  console.log('执行完毕！');
  defer.resolve(); //改变deferred对象的执行状态 - 成功
 };
 setTimeout(tasks, 5000);
 return defer.promise();
};
$.when(wait()).done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
});
// 执行异步
var setAjax = function () {
 var defer = $.Deferred();
 if (xhr) {
  xhr.abort();
  xhr = null;
 }
 var xhr = $.ajax({
  url: 'test.html',
  success: function (res) {
   console.log('数据读取成功');
   defer.resolve(res);
  },
  error: function () {
   console.log('数据读取失败');
   defer.reject();
  }
 });
 return defer.promise();
}
$.when(setAjax()).then(function (res) {
 console.log('数据读取成功', res);
}, function () {
 console.log('数据读取失败');
});

以上所述是小编给大家介绍的jQuery中的derferred使用方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com