jQuery基本教程的延迟对象使用方法
1。什么是延迟对象在开发Web站点的过程中,经常会遇到一些耗时的Javascript操作,其中有异步操作,如ajax读取服务器数据和同步操作,如遍历一个大数组,而这些数组不能立即得到结果。
通常的做法是为它们指定一个回调函数(回调)。
然而,在回调函数中,jQuery的功能非常弱。
总之,延迟对象是jQuery的回调函数解决方案。
它解决了如何处理耗时的操作,为这些操作提供更好的控制,以及统一的编程接口,其主要功能可以归纳为四点。
链写的两种ajax操作
首先,回顾一下jQuery的ajax操作的传统编写:
复制代码代码如下所示:
$ ajax({
URL
成功:函数(){
警报(哈哈,成功!!;
},
错误:函数(){
警告(错误)!;
}
});
在上面的代码中,$()接受一个对象参数,它包含两种方法:成功方法在操作成功后指定回调函数,错误方法指定操作失败后的回调函数。
如果美元。Ajax()操作完成后,如果你使用jQuery,低于1.5.0版本,返回XHR对象,你不能进行连锁经营。如果1.5.0高于1.5.0版本,它将返回延迟对象和连锁经营。
现在,新的写作方式是:
复制代码代码如下所示:
美元()
完成(函数){警报(),哈哈,成功!;}
失败(函数){警报()错误!;};
正如您所看到的,完成()相当于成功方法,失败()与错误方法相当。在使用链风格之后,代码的可读性大大提高。
三。指定相同操作的多个回调函数
延迟对象的最大好处之一是它允许您自由地添加多个回调函数。
在上面的代码中,如果ajax操作成功,我想运行一个回调函数,除了原来的回调函数之外。我该怎么办
这很简单。把它放在后面。
复制代码代码如下所示:
美元()
完成(函数){警报(),哈哈,成功!;}
失败(函数){警报()错误!;}
完成(函数){警报()第二个回调函数!;};
回调函数可以添加到任意数量的回调函数中,并按照加法的顺序执行。
四。为多个操作指定回调函数
延迟对象的另一大优点是它允许您为多个事件指定回调函数,而这不是传统编写的。
看看下面的代码,它使用了一个新方法,$():
复制代码代码如下所示:
美元。当(美元。Ajax(test1 .html),美元。Ajax(test2。html))
完成(函数){警报(),哈哈,成功!;}
失败(函数){警报()错误!;};
这段代码的意思是先执行两个操作元。Ajax(test1 .html)和美元。阿贾克斯(test2。html)。如果它们都成功,则运行由()指定的回调函数,如果出现故障或失败,执行由失败()指定的回调函数。
五、常用操作回调函数接口(第1部分)
的递延对象最大的优点是它扩展了这套回调函数接口从Ajax操作的所有操作。也就是说,任何操作,无论Ajax操作或本地操作,不管异步操作或同步操作,可以使用延迟对象的各种方法来指定回调函数。
让我们看一个具体的例子。假设有一个非常耗时的操作等待:
复制代码代码如下所示:
var =函数(){()
var任务=函数(){()
警报(完)!;
};
setTimeout(任务5000);
};
让我们为它指定一个回调函数。我们该怎么办
当然,您会认为您可以使用$(…):
复制代码代码如下所示:
$(等待())
完成(函数){警报(),哈哈,成功!;}
失败(函数){警报()错误!;};
但是,以这种方式,立即(完成)方法将立即执行,不能起到回调函数的作用,原因是$()只能延迟对象,因此必须等待()重写:
复制代码代码如下所示:
var =递延(DTD);创建延迟对象
var =函数(DTD){
var任务=函数(){()
警报(完)!;
Dtd.resolve(延期); / /更改对象的执行状态
};
setTimeout(任务5000);
返回DTD;
};
现在,等待()函数返回延迟对象,它可以添加到链操作中。
复制代码代码如下所示:
$(等待(DTD))
完成(函数){警报(),哈哈,成功!;}
失败(函数){警报()错误!;};
当等待()函数完成时,将由自动完成的()方法指定的回调函数运行。
六、deferred.resolve()方法和deferred.reject()方法
如果你仔细看,你会发现在等待另一个地方()函数的基础上,我没有解释,这是dtd.resolve()的作用是什么
为了澄清这个问题,我们引入了一个新的概念国家执行。jQuery指定延迟对象具有执行未完成的,三个州完成,和失败。如果执行状态是完成(解决),递延(做)对象立即调用回调函数的方法指定;如果执行状态是失败
在Ajax操作的前面部分,延迟对象根据返回结果自动更改其执行状态。然而,在等待()函数的执行状态,必须由programmers.dtd.resolve手动指定()意味着该DTD对象的执行状态改变从未完成完成
同样,有一个deferred.reject()方法,即改变DTD对象执行状态从不完全失败
复制代码代码如下所示:
var =递延(DTD);创建延迟对象
var =函数(DTD){
var任务=函数(){()
警报(完)!;
Dtd.reject(延期); / /更改对象的执行状态
};
setTimeout(任务5000);
返回DTD;
};
$(等待(DTD))
完成(函数){警报(),哈哈,成功!;}
失败(函数){警报()错误!;};
七、deferred.promise()方法
这种书写方式还有一个问题,那就是,DTD是一个全局对象,所以它的执行状态可以从外部改变。
请看下面的代码:
复制代码代码如下所示:
var =递延(DTD);创建延迟对象
var =函数(DTD){
var任务=函数(){()
警报(完)!;
Dtd.resolve(延期); / /更改对象的执行状态
};
setTimeout(任务5000);
返回DTD;
};
$(等待(DTD))
完成(函数){警报(),哈哈,成功!;}
失败(函数){警报()错误!;};
Dtd.resolve();
我加了一排dtd.resolve()的代码,从而改变了DTD的对象的执行状态,这样做()方法是立即执行。的提示框,5秒后跳出来执行完成!提示框。
为了避免这种情况,jQuery提供了deferred.promise()方法,其目的是将一个对象在原递延递延对象,后者只开放和改变执行方法的独立地位(如做的)和失败()方法(方法),并改变屏蔽状态的执行方法(如解决()方法和拒绝()方法),使执行状态是无法改变的。
请看下面的代码:
复制代码代码如下所示:
var =递延(DTD);创建延迟对象
var =函数(DTD){
var任务=函数(){()
警报(完)!;
Dtd.resolve(延期); / /更改对象的执行状态
};
setTimeout(任务5000);
返回(DTD)
};
var =等待(DTD);创建一个D对象,在对象上操作。
美元。当(D)
完成(函数){警报(),哈哈,成功!;}
失败(函数){警报()错误!;};
(d.resolve); / /这一次,这个声明是无效的
在上面的代码的这一部分中,等待()函数返回允诺对象,然后,我们将回调函数绑定到对象,而不是原来的延迟对象。
然而,一个更好的写作方式是allenm所指出的,把DTD的对象为等待的内部对象()函数。
复制代码代码如下所示:
var =函数(DTD){
var(DTD);在函数内部,一个新的延迟对象
var任务=函数(){()
警报(完)!;
Dtd.resolve(延期); / /更改对象的执行状态
};
setTimeout(任务5000);
返回(DTD)
};
$(等待())
完成(函数){警报(),哈哈,成功!;}
失败(函数){警报()错误!;};
八、常用操作回调函数接口(IN)
防止执行状态被外部更改的另一种方法是使用延迟对象的构造函数函数。
在这一点上,等待函数保持不变,我们直接将其传递到$延迟()中:
复制代码代码如下所示:
递延(等待)
完成(函数){警报(),哈哈,成功!;}
失败(函数){警报()错误!;};
jQuery规定,$()可以接受一个函数名(函数名)作为参数,而延迟对象($)则是这个函数的默认参数。
九、常用操作回调函数接口(下)
除了上述两种方法之外,我们还可以在等待对象上直接部署延迟接口。
复制代码代码如下所示:
var =延迟(DTD);创建延迟对象
var =函数(DTD){
var任务=函数(){()
警报(完)!;
Dtd.resolve(延期); / /更改对象的执行状态
};
setTimeout(任务5000);
};
Dtd.promise(等待);
Wait.done(功能){ alert(哈哈,成功!;}
失败(函数){警报()错误!;};
等待(DTD);
这里的关键是dtd.promise(等待),其作用是将递延界面等待的对象,这是因为这条线做的()和()不可直接调用在等待。
十,总结:递延对象的方法
前面提到过延迟对象的各种方法,并在下面做了摘要:
(1)$递延()生成一个延迟对象。
(2)deferred.done()回调函数时指定的操作
(3)回调函数时,deferred.fail()指定的操作失败
(4)当deferred.promise()没有参数,返回一个新的延迟对象,和对象的运行状态是无法改变的。当接受参数时,它充当参数对象上的一个延迟接口。
(5)deferred.resolve()手动改变延迟对象的运行状态完成
(6)deferred.reject()是deferred.resolve相反()。调用后,延迟对象的运行状态被更改为失败
(7)$()指定多个操作的回调函数。
除了这些方法之外,还有两种重要的延迟对象的方法,在上面的教程中没有提到。
(8)deferred.then()
有时为了保存,可以将完成()和失败()一起写入,这是当时()方法。
$($)
(successfunc。然后,failurefunc);
如果()有两个参数,那么第一个参数是完成()方法的回调函数,第二个参数是失败()方法的回调方法。如果()只有一个参数,则等于()。
(9)deferred.always()
此方法还可用来指定的回调函数,其功能是呼叫deferred.resolve()()()或deferred.reject,它总是执行。
复制代码代码如下所示:
美元()
总是(函数){警报()已经执行!;};