Comment implémenter des feux de circulation en javascript

Comment implémenter les feux de signalisation en JavaScript : 1. Utilisez setTimeout et la récursivité pour changer les couleurs dans une boucle ; 2. Utilisez Promise et écrivez le prochain changement de couleur dans then ; 3. Utilisez async wait et while pour implémenter les effets de feux de signalisation.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Comment implémenter des feux tricolores en JavaScript ?

JavaScript pour implémenter les feux de circulation

Utilisez setTimeout, Promise et async wait de trois manières pour implémenter le code des feux de circulation : feu rouge pendant 2 secondes, feu jaune pendant 1 seconde, feu vert pendant 3 secondes et changement de couleur en boucle. La méthode pour changer la couleur consiste simplement à imprimer la couleur.

Implémentation de setTimeout

 L'utilisation de setTimeout est le moyen le plus basique de l'implémenter. Le code est le suivant, en utilisant la récursivité pour changer les couleurs dans une boucle.

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

Implémentation de la promesse

 À l'aide de Promise, écrivez ensuite le prochain changement de couleur et enfin utilisez la récursivité pour terminer la boucle.

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

implémentation de l'attente asynchrone

 L'utilisation de l'attente asynchrone peut éviter une série de .then.then.then dans Promise et ne nécessite plus de récursivité. Utilisez while pour implémenter des boucles.

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

Apprentissage recommandé : "Tutoriel sur les bases de JavaScript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!