3.9.4 jQuery对象的promise方法

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.6k 阅读时长 ≈ 1 分钟

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>元素的动画队列执行完成后添加回调函数。在浏览器中执行该页面,将可以看到当动画完成后,页面会再追加上”动画完成!”字符串。