Promise用法例子

最新推荐文章于 2024-08-20 16:39:04 发布

ningto.com

最新推荐文章于 2024-08-20 16:39:04 发布

阅读量4.0k

点赞数 1

分类专栏： node.js

本文为博主原创文章，转载请注明来源(泞途 - 泊客网 https://ningto.com)。

本文链接：https://blog.csdn.net/tujiaw/article/details/51192442

版权

node.js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

注意：要想then方法能链式的执行下去，必须返回Promise对象！！！

'use strict';

function async(value) {
    return new Promise(function(resolve, reject) {
        var ms = Math.round(Math.random() * 1000);
        setTimeout(function() {
            console.log('waiting ' + ms + 'ms');
            // 等待ms毫秒
            resolve(value + ms);
        }, ms);
    });
}

// 每次执行随机等待n毫秒，结果统计总毫秒数
async(0)
.then(async)
.then(async)
.then(async)
.then(async)
.then(function(value) {
    console.log('------total wait:' + value + 'ms');
});


function async1(value) {
    return new Promise(function(resolve, reject) {
        resolve(value + 1);
    });
}

function async2(value) {
    // return new Promise(function(resolve, reject) {
    //     resolve(value + 2);
    // });
    // 等价与上面写法
    return Promise.resolve(value + 2);
}

function async3(value) {
    return new Promise(function(resolve, reject) {
        resolve(value + 3);
    });
}

async1(100).then(async2).then(async3).then(function(value) {
    console.log('------' + value);
});

/
function say() {
    var value = 'what';
    return Promise.resolve(value);
}
say().then(function(value) {
    value = value + ' are';
    return Promise.resolve(value);
}).then(function(value) {
    value = value + ' you';
    return Promise.resolve(value);
}).then(function(value) {
    value = value + ' doing';
    return Promise.resolve(value);
    //return Promise.reject('error, exit'); // 中途退出
}).then(function(value) {
    value = value + ' now!';
    return Promise.resolve(value);
}).then(function(value) {
    console.log('------' + value);
}).catch(function(error) {
    console.log('------' + error);
});

<html>
<head>
    <title>Ball move</title>
    <style type="text/css">
        .ball {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            margin-left: 10px;
        }
        .ball1 {
            background: #ff0000;
        }
        .ball2 {
            background: #00ff00;
        }
        .ball3 {
            background: #0000ff;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <div class="ball ball1"></div>
    <div class="ball ball2"></div>
    <div class="ball ball3"></div>


    <script type="text/javascript">
        function moving(ball, pos) {
            return new Promise(function(resolve, reject) {
                var marginLeft = parseInt(ball.css('margin-left'));
                if (marginLeft != pos) {
                    var timerId = setInterval(function() {
                        marginLeft = marginLeft + 1;
                        ball.css('margin-left', marginLeft);
                        if (marginLeft == pos) {
                            clearInterval(timerId);
                            resolve();
                        }
                    }, 20);
                } else {
                    resolve();
                }
            });
        }


        moving($('.ball1'), 100).then(function() {
            return moving($('.ball2'), 150);
        }).then(function() {
            return moving($('.ball3'), 200);
        });
    </script>
</body>
</html>