자바스크립트로 신호등을 구현하는 방법-JS 튜토리얼-php.cn

자바스크립트로 신호등을 구현하는 방법

藏色散人

풀어 주다： 2021-11-16 14:14:37

원래의

5811명이 탐색했습니다.

JavaScript에서 신호등을 구현하는 방법: 1. setTimeout 및 재귀를 사용하여 루프의 색상을 변경합니다. 2. Promise를 사용하고 그 다음에 다음 색상 변경을 작성합니다. 3. 신호등 효과를 구현하려면 비동기 대기를 사용합니다.

자바스크립트로 신호등을 구현하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript로 신호등을 구현하는 방법은 무엇입니까?

JavaScript를 사용하여 신호등 구현

setTimeout, Promise 및 async Wait를 세 가지 방법으로 사용하여 신호등 코드를 구현합니다. 빨간색 표시등은 2초, 노란색 표시등은 1초, 녹색 표시등은 3초, 색상 변경 루프에서. 색상을 변경하는 방법은 단순히 색상을 인쇄하는 것입니다.

setTimeout 구현

setTimeout을 사용하는 것이 가장 기본적인 구현 방법으로, 재귀를 사용하여 루프에서 색상을 변경하는 코드는 다음과 같습니다.

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

로그인 후 복사

Promise 구현

Promise를 사용하여 그 다음 색상 변경을 작성하고 마지막으로 재귀를 사용하여 루프를 완료합니다.

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

로그인 후 복사

async wait 구현

async wait를 사용하면 Promise에서 일련의 .then.then.then을 피할 수 있으며 더 이상 루프를 구현하기 위해 while을 사용할 필요가 없습니다.

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

로그인 후 복사

추천 학습: "JavaScript 기본 튜토리얼"

위 내용은 자바스크립트로 신호등을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!