JS 中使用Promise 實現紅綠燈詳解
本文透過實例代碼給大家介紹了JS 中使用Promise 實現紅綠燈效果，在文中給大家介紹了一個promise用法例子,需要的朋友可以參考下，希望能幫助到大家。
要求
使用promise 實作紅綠燈顏色的跳躍
綠燈執行三秒後
#黃燈執行四秒後
#紅燈執行五秒
html 實作如下：
<ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul>
定義一個空類，之後再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);
});
<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>
<p class="ball ball1"></p>
<p class="ball ball2"></p>
<p class="ball ball3"></p>
<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>相關推薦：
微信小程式promsie.all和promise順序執行詳解
Promise,Generator（生成器）,async（非同步）函數的用法
以上是JS 中使用Promise 實現紅綠燈詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
高德地圖紅綠燈倒數計時怎麼設定_高德地圖紅綠燈倒數計時的設定教學
Apr 01, 2024 pm 05:37 PM
1.想要使用高德地圖紅綠燈導航功能用戶們需要先將高德地圖更新至最新版本，然後點擊首頁中的駕車(如圖所示)。 2、然後輸入起始地和目的地，點選開始導航(如圖)。 3.最後在地圖上即將經過紅綠燈時，就可以看到讀秒顯示(如圖)。
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
高德導航紅綠燈讀秒怎麼設定
Feb 23, 2024 pm 10:07 PM
高德地圖是能夠設定紅綠燈讀秒的，那麼這個功能具體該怎麼設定呢？用戶需要打開高德地圖裡的更多設置，然後找到自訂導航這個功能，就能在導航的時候讀秒了。這篇紅綠燈讀秒設定方法教學就能告訴大家具體如何設置，趕快來看看吧！高德地圖使用教程高德導航紅綠燈讀秒怎麼設定1、先打開軟體後，進入導航，然後點擊右下的更多。 2、點選裡面的自訂導航按鍵。 3.在下面可以有著電子眼展示功能，點擊就能開啟了。
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
言出必行：兌現承諾的好處和壞處
Feb 18, 2024 pm 08:06 PM
在日常生活中，我們常常會遇到承諾與兌現之間的問題。無論是在個人關係中，或是在商業交易中，承諾的兌現都是建立信任的關鍵。然而，承諾的利與弊也常常會引起爭議。本文將探討承諾的利與弊，並給予一些建議，如何做到言出必行。承諾的利是顯而易見的。首先，承諾可以建立信任。當一個人信守承諾時，他會讓別人相信自己是個可信賴的人。信任是人與人之間建立的紐帶，它可以讓人們更加
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
