本文通过实例代码给大家介绍了JS 中使用Promise 实现红绿灯效果，在文中给大家介绍了一个promise用法例子,需要的朋友可以参考下，希望能帮助到大家。

要求使用promise 实现红绿灯颜色的跳转

绿灯执行三秒后

黄灯执行四秒后

红灯执行五秒

html 实现如下：

定义一个空类，之后再js中操作对应的类名即可实现相关的效果。

CSS实现如下：ul {

position: absolute;

width: 200px;

height: 200px;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

/*画3个圆代表红绿灯*/

ul >li {

width: 40px;

height: 40px;

border-radius:50%;

opacity: 0.2;

display: inline-block;

}

/*执行时改变透明度*/

ul.red >#red,

ul.green >#green,

ul.yellow >#yellow{

opacity: 1.0;

}

/*红绿灯的三个颜色*/

#red {background: red;}

#yellow {background: yellow;}

#green {background: green;}

javascript原理：

promise函数为一个异步操作函数，在函数运行结束时可以使用then()方法。我们再在promise函数内部设置延迟执行即可实现。

js 代码如下：function timeout(timer){

return function(){

return new Promise(function(resolve,reject){

setTimeout(resolve,timer)

})

}

}

var green = timeout(3000);

var yellow = timeout(4000);

var red = timeout(5000);

var traffic = document.getElementById("traffic");

(function restart(){

'use strict' //严格模式

console.log("绿灯"+new Date().getSeconds()) //绿灯执行三秒

traffic.className = 'green';

green()

.then(function(){

console.log("黄灯"+new Date().getSeconds()) //黄灯执行四秒

traffic.className = 'yellow';

return yellow();

})

.then(function(){

console.log("红灯"+new Date().getSeconds()) //红灯执行五秒

traffic.className = 'red';

return red();

}).then(function(){

restart()

})

})();

Demo 请 点击这里!

ps:下面看一个Promise用法例子

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

});

Ball move

.ball {

width: 40px;

height: 40px;

border-radius: 20px;

margin-left: 10px;

}

.ball1 {

background: #ff0000;

}

.ball2 {

background: #00ff00;

}

.ball3 {

background: #0000ff;

}

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);

});

相关推荐：