>  기사  >  웹 프론트엔드  >  JS에서 Promise를 사용하여 신호등 예제 코드 구현(데모)

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

韦小宝
韦小宝원래의
2018-01-11 10:16:272584검색

이 글에서는 신호등 효과를 구현하기 위해 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(){
  &#39;use strict&#39;      //严格模式
  console.log("绿灯"+new Date().getSeconds()) //绿灯执行三秒 
  traffic.className = &#39;green&#39;;
  green()
  .then(function(){
   console.log("黄灯"+new Date().getSeconds()) //黄灯执行四秒
   traffic.className = &#39;yellow&#39;;
   return yellow();
  })
  .then(function(){
   console.log("红灯"+new Date().getSeconds()) //红灯执行五秒
   traffic.className = &#39;red&#39;;
   return red();
  }).then(function(){
   restart()
  })
  })();

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

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

완전한 Promise를 구현하는 방법

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.