0%

3.9.4 jQuery对象的promise方法

发表于 更新于 分类于 ， ，

3.9.4 jQuery对象的promise方法

从jQuery 1.5开始,所有jQuery对象都增加了promise()方法,该方法返回一个Promise对象,通过该Promise 对象可以监听jQuery对象上动画队列的执行进度—通俗来说,就是可以为动画队列的执行失败、执行完成添加回调函数。

下面的例子来自jQuery的官方文档,该示例中定义了4个<div>元素以”渐隐”方式隐藏,程序还通过先调用promise()方法,再调用done()方法为它们添加回调函数。示例代码如下。

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
43
44
45
46
47
<!DOCTYPE html>
<html>

<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> Deferred对象 </title>
	<style type="text/css">
		div {
			height: 50px;
			width: 50px;
			float: left;
			margin-right: 10px;
			display: none;
			background-color: #e0e;
		}
	</style>
</head>

<body>
	<script type="text/javascript" src="../jquery-3.1.1.js"></script>
	<button>开始</button>
	<p>准备...</p>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<script type="text/javascript">
		// 为button元素的click事件绑定事件处理函数
		$("button").click(function () {
			$("p").append(" 开始动画...");
			// 迭代处理每个div元素
			$("div").each(function (i) {
				// 先让每个div元素以“渐显”方式显示出来
				// 在让每个div元素以“渐隐”方式隐藏起来，隐藏所需要时间不同
				$(this).fadeIn().fadeOut(1000 * (i + 1));
			});
			// 为所有div元素上动画队列执行完成时指定回调函数
                   // ①号代码
			$("div").promise().done(function () {
				$("p").append(" 动画完成! ");
			});
		});
	</script>
</body>

</html>

该程序中①号代码用于为所有<div>元素的动画队列执行完成后添加回调函数。在浏览器中执行该页面,将可以看到当动画完成后,页面会再追加上”动画完成!”字符串。

原文链接: 3.9.4 jQuery对象的promise方法