jQuery中的延迟使用

递延简介

延迟对象是jQuery的回调函数解决方案。jQuery以前版本中的异步回调不是很好，所以后来补充了这个解决方案。

通用ajax操作模式

让我们首先回顾一下jQuery中常见的ajax操作

$.Ajax ({URL :' test.html '，success : function(RES){ console . log('数据读取成功')；}，错误： 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('数据读取失败'))；});为普通函数指定回调函数

前面提到的时候是用于ajax的方法，但是ajax实际上是一个延迟对象。如果它不是ajax对象，那么直接使用时就不会有效，done方法会直接执行

所以我们需要手动创建一个新的延迟对象

var defer=$。递延()；//创建新的延迟对象varwait=function(delay){ vartasks=function(){ console . log('执行已完成！');delay . resolve()；//更改延期对象的执行状态-成功}；setTimeout(任务，5000个)；返回延期；};此处的解析触发完成，相应的拒绝方法用于调用fail方法。

var defer=$。递延()；//创建新的延迟对象varwait=function(delay){ vartasks=function(){ console . log('执行已完成！');推迟。reject()；//更改延迟对象的执行状态-失败}；setTimeout(任务，5000个)；返回延期；};执行方法

$.何时(等待(推迟))。done (function (RES) {console.log('数据读取成功')；}).fail(function () {console.log('数据读取失败'))；});进一步优化

以上代码还存在一些问题。defer是全局公开的，因此我们可以通过全局执行defer.resolve()提前回调。

为了避免这种情况，jQuery提供了deferred.promise()方法，用于在原来的delivered对象上返回另一个delivered对象，只打开与更改执行状态无关的方法(如done方法和fail方法)，屏蔽与更改执行状态有关的方法(如resolve和reject方法)。

var defer=$。递延()；//创建新的延迟对象varwait=function(delay){ vartasks=function(){ console . log('执行已完成！');delay . resolve()；//更改延期对象的执行状态-成功}；setTimeout(任务，5000个)；return delay . promise()；};$.何时(等待(推迟))。done (function (RES) {console.log('数据读取成功')；}).fail(function () {console.log('数据读取失败'))；});您也可以在函数中包装延迟

//普通方法var wait=function(){ var delay=$ .递延();//新建一个延期的对象var tasks=function(){ console。日志('执行完毕!');延迟。resolve()；//改变延期的对象的执行状态-成功};setTimeout(任务，5000个);返回延迟。诺言()；};$.什么时候(等一下).完成（函数(res) { console.log('数据读取成功');}).fail(function () { console.log('数据读取失败');});//执行异步var setAJax=function(){ var delay=$ .递延();if(xhr){ xhr。abort()；xhr=null} var xhr=$ .ajax({ url: 'test.html '，success : function(RES){ console。日志('数据读取成功');延迟。决心；}，错误：函数(){ console。日志('数据读取失败');延迟。reject()；} });返回延迟。诺言()；}$.when(setAjax()).然后（函数(res) { console.log('数据读取成功，RES)；}，function () { console.log('数据读取失败');});以上所述是小编给大家介绍的jQuery中的derferred使用方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！