Bagaimana untuk melaksanakan lampu isyarat dalam javascript

Cara melaksanakan lampu isyarat dalam JavaScript: 1. Gunakan setTimeout dan rekursi untuk menukar warna secara kitaran 2. Gunakan Promise dan tulis perubahan warna seterusnya pada masa itu; .

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Bagaimana untuk melaksanakan lampu isyarat dalam JavaScript?

JavaScript melaksanakan lampu isyarat

Gunakan setTimeout, Promise dan async menunggu dalam tiga cara untuk melaksanakan kod lampu isyarat: lampu merah selama 2 saat, lampu kuning selama 1 saat, lampu hijau selama 3 saat, bergelung untuk menukar warna. Kaedah menukar warna hanyalah dengan mencetak warna.

pelaksanaan setTimeout

Menggunakan setTimeout ialah cara paling asas untuk melaksanakannya Kod adalah seperti berikut, menggunakan rekursi untuk menukar warna dalam gelung.

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

Pelaksanaan janji

Gunakan Promise untuk menulis perubahan warna seterusnya pada masa itu, dan akhirnya gunakan rekursi untuk melengkapkan gelung.

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 menunggu pelaksanaan

Menggunakan async await boleh mengelakkan siri .then.then.then Promise, dan tidak lagi memerlukan pengulangan, hanya gunakan sementara Realisasikan kitaran.

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

Disyorkan kajian: "Tutorial Asas JavaScript"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lampu isyarat dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!