.promise()

类别：延迟对象

.promise( [type ] [, target ] )返回类型：Promise

描述： 返回一个应答对象，用来观察当某个类型的所有操作绑定到集合时，是否排队，是否已经完成。

.promise()方法返回一个动态生成的应答对象，一旦绑定到此集合的所有的特定类型的操作，无论队列与否，都结束时，此应答对象就被解决了。

默认情况下，type是"fx"，它意味着当选中的元素的所有动画完成时，返回的应答对象已经被解决了。

解决和唯一的参数是调用.promise()的集合。

如果提供了target，.promise()给它附加此方法，然后返回此对象，而不是创建一个新对象。这对在一个已经存在的对象上附加应答对象的行为很有用。

注意：返回的应答对象链接到针对一个元素存储在.data()上的延迟对象上。因为.remove()方法删除了元素的数据以及元素本身，所以它将阻止元素的任何未解决的应答对象被解决掉。如果有必要在元素的应答对象被解决之前从DOM树中删除一个元素，请使用.detach()方法来代替，然后在解决了之后使用.removeData()方法。

示例：

在集合上使用.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 );
});

当所有的动画已经结束（包括那些在动画回调函数初始化的函数以及后期添加的函数）时解决返回的应答对象。

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
40
41
42
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>promise demo</title>
  <style>
  div {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;
    display: none;
    background-color: #090;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "button" ).on( "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>

演示：

使用$.when()语句解决返回的应答对象（.promise()方法使你可以配合jQuery集合来做它）：

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
40
41
42
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>promise demo</title>
  <style>
  div {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;
    display: none;
    background-color: #090;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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" ).on( "click", function() {
  $( "p" ).append( " Started... " );
 
  $.when( effect() ).done(function() {
    $( "p" ).append( " Finished! " );
  });
});
</script>
 
</body>
</html>

演示：