defer-layer.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery的deferred用法</title>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./layer/layer.js"></script>
</head>

<body>
    <button id="test1">layer 弹窗</button>
    <script>
        $('#test1').on('click', function() {
            layer.msg('deferred 对象详解')
        })
        // 阮一峰 jQuery的deferred对象详解
        var dtd = $.Deferred(); // 新建一个Deferred对象

        var wait = function (dtd) {

            var tasks = function () {

                alert("执行完毕！");
                // resolve的数据能带到done函数或者then函数的done回调中
                dtd.resolve('hello'); // 改变Deferred对象的执行状态

            };

            setTimeout(tasks, 2000);

            // return dtd;
            return dtd.promise();

        };

        var d = wait(dtd)

        d.then(function (arg) {
            console.log('变量', arg)
            console.log('这里也成功了！')
        })

        $.when(d)

            .done(function (arg) {
                console.log('参数', arg)
                console.info("哈哈，成功了！");
            })

            .fail(function () {
                alert("出错啦！");
            });
        
        // dtd.promise()方法屏蔽了resolve与reject方法
        d.resolve();
    </script>
</body>

</html>