JavaScriptで信号機を実装する方法-jsチュートリアル-php.cn

JavaScriptで信号機を実装する方法

藏色散人

リリース： 2021-11-16 14:14:37

オリジナル

5609 人が閲覧しました

JavaScript で信号機を実装する方法: 1. setTimeout と再帰を使用して色を周期的に変更します; 2. Promise を使用し、次の色の変更を then に書き込みます; 3. async await と while を使用して信号機の効果を実装します。

JavaScriptで信号機を実装する方法

このチュートリアルの動作環境: Windows7 システム、JavaScript1.8.5 バージョン、Dell G3 コンピューター。

JavaScript で信号機を実装するにはどうすればよいですか?

信号機を実装するための JavaScript

setTimeout、Promise、および async await を 3 つの方法で使用して、信号機コードを実装します。赤信号を 2 秒間点灯します。黄色のライトが 1 秒間、緑色のライトが 3 秒間、ループして色が変わります。色を変更する方法は、色を印刷するだけです。

setTimeoutの実装

setTimeoutを使うのが最も基本的な実装方法で、再帰を使ってループ内で色を変更するコードは以下の通りです。

function changeColor(color) {
console.log('traffic-light ', color);
}
function main() {
changeColor('red');
setTimeout(()=>{
changeColor('yellow');
setTimeout(() => {
changeColor('green');
setTimeout(main, 2000);
}, 1000);
}, 2000);
}
main();

ログイン後にコピー

Promise の実装

Promise を使用して then に次の色の変更を書き込み、最後に再帰を使用してループを完了します。

function sleep(duration){
    return new Promise(resolve => {
        setTimeout(resolve, duration);
    })
}
function changeColor(duration,color){
    return new Promise(resolve => {
console.log('traffic-light ', color);
    sleep(duration).then(resolve);
})
}
function main() {
return new Promise(resolve => {
changeColor(2000, 'red').then(() => {
changeColor(1000, 'yellow').then(() => {
changeColor(3000, 'green').then(() => {
main();
})
})
})
})
}main();

ログイン後にコピー

async await 実装

async await を使用すると、Promise での .then.then.then の連続を回避でき、再帰も必要ありません。 while はループを実装します。

function sleep(duration) {
return new Promise(resolve => {
setTimeout(resolve, duration);
})
}
async function changeColor(color, duration) {
console.log('traffic-light ', color);
await sleep(duration);
}
async function main() {
while (true) {
await changeColor('red', 2000);
await changeColor('yellow', 1000);
await changeColor('green', 3000);
}
}
main();

ログイン後にコピー

推奨学習: 「JavaScript 基本チュートリアル」

以上がJavaScriptで信号機を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。