jquery延迟对象解析

一般技术水平有限。如果有什么错误，请纠正我。

ES6实现了延迟对象Promise，但今天主角是JQ的延迟对象，套路几乎一样。我们先来看一个牵强的例子：

button id=' add ' add/button button id=' remove ' remove/button div id=' content '/div $(function(){ var DFD=new $)。递延()；var add=$(' # add ')；var remove=$(' # remove ')；var content=$(“# content”)；add . click(function(){ var span=$(' span我是通过单击按钮创建的元素/span ')；$(“span”)。长度==0 $(“body”)。追加(span)；DFD . resolve()；})remove . click(function(){ var span=$(“span”)；span span . remove()；}) dfd.done(function(){ $('span ')。css('color '，' red ')；})})现在把焦点放在函数上，我们可以看到span元素被添加了，点击添加按钮颜色变成红色。然后看看我们代码中的异类事物，第一个var dfd=new $。递延()；和添加事件函数中的DFD . resolve()；还有DFD。done (function () {$ ('span '))。CSS('颜色'，'红色')；})。

$.延迟()是我们今天介绍的重点——JQ的延迟宾语。所谓延迟，是指某个事件在未来可以运行。让我们看一下上面代码的处理流程。在上面的代码中，我们在调用新创建的延迟对象的dfd.done()方法的参数位置传递了一个匿名函数表达式。在执行click事件的处理函数时，执行了我们在dfd.done()中编写的匿名函数。在这个过程中，我们可以看到dfd把函数放在done中，解析Dfd是一个延迟对象，这显然可以改变函数的执行顺序。

如果你仔细看上面的代码，你会发现它很有用。让我们把改变颜色的代码放到一个函数中。点击时最好调用这个函数。写这么多麻烦没用。事实上，延迟对象主要用于AJAX。在上面的代码中，在我们单击添加之后，我们单击删除，然后单击添加，然后我们发现这个单词这次没有变红。这是因为延迟对象在状态改变后会失效，说白了就是一次性的。

延迟对象使用

JQ为我们实现了延迟对象的功能，一般称为delivered或Promise，基本上就是一个东西。确切地说，Promise是从derived派生出来的子类。

当我们使用它时，我们首先创建一个延迟对象：var dfd=new $。延期()。

延迟对象dfd有三种状态，即待定、已解决、已拒绝和已拒绝。我们可以在dfd对象上使用state方法来检查此时的状态：dfd.state()。

创建dfd后，其状态为待定。调用resolve方法：dfd.resolve()后，它的状态将变为resolve，然后将执行dfd.done()中的函数。dfd调用reject方法：dfd.reject()后，它的形式会变成reject，然后执行dfd.fail()中的方法，dfd对象从pending变为resolved或rejected后不会改变，这就是为什么上面的代码只能在第一次点击后变成红色。

让我们看看开头的代码。我们的dfd.done()定义了字体变红的功能。单击该函数后，dfd调用resolve。之后，dfd的状态从挂起变为已解决，并且将执行done中的方法，然后颜色将变为红色。

参数可以在dfd.resolve()和dfd.done()之间传递。现在，我们将对起始代码进行一些修改：

//done中的修改如下：DFD . done(function(color){ $(' span '))。CSS ('color '，color)})//点击事件的处理函数修改如下：DFD . resolve(' green ')；我们点击后，字体颜色变成了绿色。

此外，dfd总是有另一个功能：DFD。始终()，当DFD的状态从待定更改为哪个状态时，将执行始终中的功能。

dfd的每一个方法都会返回一个延迟对象，所以可以有很多完成、失败和总是，可以直接写成链调用：

dfd.done(function(){})。done(function(){})。失败(function(){ })；

无论可以写dfd的哪个API，我们都可以考虑它的执行顺序是否可以保证。在这一点上，我们可以放心，dfd的函数执行顺序是完全没有问题的，而且是按照我们写的顺序执行的。请看下面的代码：

DFD . done(function(){ var span=$(' span我是通过单击按钮创建的元素/span ')；$(“span”)。长度==0 $(“body”)。追加(span)；}).完成(函数(颜色){ $('span '))。css('color '，color)})；})第一个函数添加一个元素，第二个函数改变添加元素的颜色。

每当dfd的三个API中的函数从挂起状态改变时，它们只能在异步和同步的情况下执行。更准确地说，dfd在调用dfd.resolve()后执行的done中的函数将立即执行。对于在dfd.resolve()之后完成的，它将在程序到达它时执行：

var dfd=new $。递延()；DFD . done(function(){ console . log(1)})；DFD . done(function(){ console . log(2)})；console.log('在此之前解析')；DFD . resolve()；console . log(' resolve after ')；DFD . done(function(){ console . log(3)})；//resolvebefore，1，2，resolveafter，3延迟对象示例

一开始，当我们使用JQ的AJAX时，我们通常会写道：

$.ajax({ url:'x/y '，type:'post '，data : ' }.} '，contentType: '应用程序/JSON；Charset=utf-8 '，success:function () {}，error:function () {}}) AJAX将在1.5之后返回一个Promise对象(看起来是这个版本~)，然后我们可以写如下：

$.ajax({ url:'x/y '，type:'post '，data : ' }.} '，contentType: '应用程序/JSON；Charset=utf-8 '，})。done(function(){})。fail (function () {})看起来更气人一点，我们还可以添加更多。done (function () {})，每个done处理不同的事情，这样看起来更清晰。

我们已经知道，如果我们有以下代码，延迟对象可以改变代码的执行顺序：

$.ajax({ url:' fetch data '，type:' post '，contenttype3360' XXX'})。done(函数(数据){$。Ajax ({url3360 '用数据获取数据'，data:data，type:'post ')内容类型：' xxxx'})。done(函数(数据){使用数据to _ dosth.}))我们会发现嵌套多了一点，所以可以使用delay对象让它看起来更好看：

var dfd=new $。递延()；$.ajax({ url:' get data '，类型：' post '，内容类型：' XXX'})。完成(功能(数据){DFD。解析(数据)；}) DFD。done(函数(数据){$。Ajax ({URL : '带数据取数据'，data:data，type:'post '，Content type :' xxxx'})。done(函数(数据){使用数据to _ dosth.}))我们可以在没有延迟对象的情况下完成所需的功能。此时，我们需要一层一层地嵌套我们的处理过程。有了delay对象，我们可以避免这种事情，它可以很容易地控制代码的执行顺序，让代码看起来更清晰。你可能会说我不能在正确的地方调整封装的功能。如果你自己读代码，没关系，但是如果你换了一个人，他的滚动条可能一直都是上下浮动的。

延迟对象的功能之一是组合AJAX调用。比如一个接口取数据A，另一个接口取数据B和a B之后，我们可以用这些数据去做一些自己喜欢做的事情，这样就可以用延迟对象轻松实现了。这时，我们可以使用JQ的$。当()意识到这一点。$.when()就像他的name-when-，他的参数可以是Promise对象，也可以是string(很少遇到但没有介绍)，他的返回结果也是Promise对象。这里有一个小例子：

var all DATa={ }；Var dataA=$。ajax({ url: '获取A的url '，键入：' post '，})。完成(函数(数据){alldata。a=数据；});Var dataB=$。ajax({ url: '获取b的url '，键入：' post '，})。完成(函数(数据){alldata。b=数据；});$.时(dataA，dataB)。done(function(){使用all data _ do某事.});AllData是保存所有数据的集合，dataA是AJAX返回的第一个Promise对象，dataB是第二个。done方法的唯一条件。when()要执行的是dataA和dataB都成功执行。

附加：dfd的另一个组合是通知进度。当dfd对象的状态为挂起时，可以调用DFD . north fy()。调用后，将执行dfd.progress()中的函数。只要dfd处于挂起状态，就可以一直调用dfd.notify()，还可以传递参数。