Promise用法例子

来源：互联网发布：龙之崛起怎么网络联机编辑：程序博客网时间：2024/06/16 21:39

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

1 0