您的位置：首页 > 其它

Promise用法例子

2016-04-19 17:29 323 查看

注意：要想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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航