Promise 红绿灯模拟原理实例

ES6 Promise 学习实例

eg: 模拟红绿灯异步跳转原理

---

html

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

---

css

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

---

js

// 声明计时器方法
function timeOut(timer){
    return function(){
        return new Promise((resolve,reject)=>{
            // 异步执行内容  计时器计时之后要执行的动作
            setTimeout(resolve,timer)
        })
    }
}

// 声明红绿灯方法，声明ul元素标签
var green = timeOut(3000)           // 绿灯三秒
var yellow = timeOut(4000)          // 黄灯四秒
var red = timeOut(5000)             // 红灯五秒

var traffic = document.getElementById("traffic")

function restart(){
    // 默认绿灯
    traffic.className = 'green'
    
    // 开始红绿灯转换
    green()
    .then(()=>{
        traffic.className = 'yellow'
        return yellow()
    })
    .then(()=>{
        traffic.className = 'red'
        return red()
    })
    .then(()=>{
        restart()
    })
}

// 开始自执行的方法
(restart())()

---

效果