# .promise()

所属分类：延迟对象 英文文档：.promise()

## .promise( [type ] [, target ] )返回: Promise

描述: 返回一个 Promise 对象，用来观察当某种类型的所有行动绑定到集合，排队与否还是已经完成。

- #### 添加的版本: 1.6.promise( [type ] [, target ] )

  - type (默认: `fx`)
    类型: String
    需要待观察队列类型。
  - target
    类型: PlainObject
    将要绑定 promise 方法的对象。

`.promise()`方法返回一个动态生成的 Promise，当绑定到集合中的所有特定动作（action）已经被加入或未被加入到队列中时，生成的 Promise 将被受理（resolve）。

默认情况下， `type`的值是`"fx"` ，这意味着返回被受理（resolve）的 Promise 对象的时机，是在所有被选中元素的动画都完成时发生的。

解决上下文和唯一的参数是哪个集合到`.promise()`被调用。

如果提供`target`参数，`.promise()`在该参数上添加方法，然后返回这个对象，而不是创建一个新的。它适用于在一个已经存在的对象上添加 Promise 行为的情况。

> 注意: 返回的 Promise 被链接到延迟对象上，保存在元素的 `.data()` 中。由于 `.remove()` 方法会移除元素上的 data，同时也会移除元素本身。所以，使用它会防止任何元素上未被受理的（unresolved） Promise 被受理（resolving）。如果有必要在元素的 Promise 被受理（resolved）之前，从 DOM 中移除该元素的话，请使用 `.detach()` 来代替。之后再调用 `.removeData()`

## 例子:

#### Example: 在一个没有激活动画的集合上调用 .promise()，返回一个被受理（resolved）的 Promise：

1 2 3 4 5 6 |
    var div = $( "<div />" ); div.promise().done(function( arg1 ) {  // will fire right away and alert "true"  alert( this === div && arg1 === div );});

#### Example: 当所有的动画结果时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画），受理（Resolve）返回的 Promise：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
    <!DOCTYPE html><html><head>  <style>div {  height: 50px; width: 50px;  float: left; margin-right: 10px;  display: none; background-color: #090;}</style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body> <button>Go</button><p>Ready...</p><div></div><div></div><div></div><div></div>  <script>$("button").bind( "click", function() {  $("p").append( "Started...");   $("div").each(function( i ) {    $( this ).fadeIn().fadeOut( 1000 * (i+1) );  });   $( "div" ).promise().done(function() {    $( "p" ).append( " Finished! " );  });});</script> </body></html>

#### Demo:

#### Example: 使用 $.when() 语句(.promise() 方法使得在 jQuery 集合中实现它变成了可能)，受理（Resolve）返回的 Promise：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
    <!DOCTYPE html><html><head>  <style>div {  height: 50px; width: 50px;  float: left; margin-right: 10px;  display: none; background-color: #090;}</style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body> <button>Go</button><p>Ready...</p><div></div><div></div><div></div><div></div>  <script>var effect = function() {  return $("div").fadeIn(800).delay(1200).fadeOut();}; $("button").bind( "click", function() {  $("p").append( " Started... ");   $.when( effect() ).done(function() {    $("p").append(" Finished! ");  });}); </script> </body></html>

#### Demo: