JS에서 Promise를 사용하여 신호등 예제 코드 구현(데모)

이 글에서는 신호등 효과를 구현하기 위해 JS에서 Promise를 사용하는 방법을 소개합니다. Promise 사용법을 모르는 친구들은 이 글을 참고하세요

요구 사항 E 빨간색과 녹색 조명 색상 점프를 구현하려면 Promise를 사용하세요. 3초 동안 녹색 조명이 켜진 후 4초 동안 노란색 조명이 실행됩니다.

빈 클래스를 정의한 후 해당 클래스 이름을 js에서 조작합니다. 효과.

• CSS는 다음과 같이 구현됩니다.

  <ul id="traffic" class="">
   <li id="green"></li>
   <li id="yellow"></li>
   <li id="red"></li>
  </ul>

• javascript

  원리:

• promise 함수는 비동기 작업 함수이며 함수 실행 마지막에 then() 메서드를 사용할 수 있습니다. Promise 함수 내에서 지연된 실행을 설정하면 이를 달성할 수 있습니다.
  js 코드는 다음과 같습니다:

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;}

• ps: Promise 사용법의 예를 살펴보겠습니다

참고: then 메소드를 체인에서 실행하려면 Promise 객체를 반환해야 합니다! ! !

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

위는 에디터가 소개한 신호등 구현을 위해 JS에서 Promise를 사용한 예제 코드(데모)입니다. 많은 분들께 도움이 되었으면 좋겠습니다! !

관련 권장 사항: jQuery에서 Promise를 사용하는 구체적인 방법

완전한 Promise를 구현하는 방법

Promise 객체의 간단한 사용법에 대하여

위 내용은 JS에서 Promise를 사용하여 신호등 예제 코드 구현(데모)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!