功能需求
模拟交通灯信号，分别以5秒、1.5秒、3.5秒来循环切换绿灯（pass状态）、黄灯（wait状态）和红灯（stop状态）。也就是，默认是绿灯，过5秒后显示黄灯，过1.5秒后显示红灯，再过3.5秒后又回到绿灯，然后以这样的方式继续循环下去。

# 方法一：把每种状态嵌套进去

html

<ul id="traffic" class="wait">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

css

#traffic {
  display: flex;
  flex-direction: column;
}

#traffic li{
  list-style: none;
  width: 50px;
  height: 50px;
  background-color: gray;
  margin: 5px;
  border-radius: 50%;
}

#traffic.s1 li:nth-child(1) {
  background-color: #a00;
}

#traffic.s2 li:nth-child(2) {
  background-color: #aa0;
}

#traffic.s3 li:nth-child(3) {
  background-color: #0a0;
}

#traffic.s4 li:nth-child(4) {
  background-color: #a0a;
}

#traffic.s5 li:nth-child(5) {
  background-color: #0aa;
}

js

const traffic = document.getElementById('traffic');

(function reset(){
//默认情况下，将traffic的className属性设置为's1'
  traffic.className = 's1';
  
  setTimeout(function(){
      traffic.className = 's2';
      setTimeout(function(){
        traffic.className = 's3';
        setTimeout(function(){
          traffic.className = 's4';
          setTimeout(function(){
            traffic.className = 's5';
            setTimeout(reset, 1000)
          }, 1000)
        }, 1000)
      }, 1000)
  }, 1000);
})();

一开始就获取了class=traffic的元素，然后声明一个reset函数，这个函数的功能是：默认情况下，将这个traffic元素的className属性设置为's1'。这样设置后，它就命中了下面这个CSS设置，使得li元素的背景变成了绿色。然后是几个setTimeOut方法嵌套。

缺点：

1.如果我们修改了HTML代码，元素就不叫做traffic了，这个函数就不work了。 2.如果我们想把这个函数复用到其他地方，我们还得在那个地方重建这个traffic对象。 # 方法二：抽象数据做状态的切换

html

<ul id="traffic" class="wait">
  <li></li>
  <li></li>
  <li></li>
</ul>

css

#traffic {
  display: flex;
  flex-direction: column;
}

#traffic li {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: gray;
  margin: 5px;
  border-radius: 50%;
}

#traffic.stop li:nth-child(1) {
  background-color: #a00;
}

#traffic.wait li:nth-child(2) {
  background-color: #aa0;
}

//将class=traffic&class=pass元素下的第一个li的元素的背景色设为绿色
#traffic.pass li:nth-child(3) {
  background-color: #0a0;
}

JS

//获取class=traffic的元素
const traffic = document.getElementById('traffic');

//抽象数据状态
const stateList = [  {state: 'wait', last: 1000},  {state: 'stop', last: 3000},  {state: 'pass', last: 3000},];

//异步的递归调用
function start(traffic, stateList){
//会根据stateIdx进行切换
  function applyState(stateIdx) {
    const {state, last} = stateList[stateIdx];
    traffic.className = state;
    setTimeout(() => {
      applyState((stateIdx + 1) % stateList.length);
    }, last)
  }
  applyState(0);
}

start(traffic, stateList);

数据抽象就是把数据定义并聚合成能被过程处理的对象，交由特定的过程处理。简单来说，就是数据的结构化。经过数据抽象的代码可以适应不同状态和时间的业务需求，我们只需要修改数据抽象即可，而不修改start方法。

缺点：

采用数据抽象重构后，我们的start方法还未达到完全封装。因为start函数种存在一部分改变外部状态的代码。我们把改变外部状态的部分叫做代码的副作用。通常情况下，我们可以考虑把函数体内部分有副作用的代码剥离出来，这往往能提升函数的通用性、稳定性和可测试性。

# 方法三：过程抽象出一个轮询的方法

html

<ul id="traffic" class="wait">
  <li></li>
  <li></li>
  <li></li>
</ul>

css

#traffic {
  display: flex;
  flex-direction: column;
}

#traffic li{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: gray;
  margin: 5px;
  border-radius: 50%;
}

#traffic.stop li:nth-child(1) {
  background-color: #a00;
}

#traffic.wait li:nth-child(2) {
  background-color: #aa0;
}

#traffic.pass li:nth-child(3) {
  background-color: #0a0;
}

js

const traffic = document.getElementById('traffic');

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function poll(...fnList){
  let stateIndex = 0;
  
  return async function(...args){
    let fn = fnList[stateIndex++ % fnList.length];
    return await fn.apply(this, args);
  }
}

async function setState(state, ms){
  traffic.className = state;
  await wait(ms);
}

//过程抽象
let trafficStatePoll = poll(setState.bind(null, 'wait', 1000),
                            setState.bind(null, 'stop', 3000),
                            setState.bind(null, 'pass', 3000));

(async function() {
  // noprotect
  while(1) {
    await trafficStatePoll();
  }
}());

# 方法四：用primise对象包裹起来

html

<ul id="traffic" class="wait">
  <li></li>
  <li></li>
  <li></li>
</ul>

css

#traffic {
  display: flex;
  flex-direction: column;
}

#traffic li{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: gray;
  margin: 5px;
  border-radius: 50%;
}

#traffic.stop li:nth-child(1) {
  background-color: #a00;
}

#traffic.wait li:nth-child(2) {
  background-color: #aa0;
}

#traffic.pass li:nth-child(3) {
  background-color: #0a0;
}

js

const traffic = document.getElementById('traffic');

//等待多长时间
function wait(time){
  return new Promise(resolve => setTimeout(resolve, time));
}

//状态的切换
function setState(state){
  traffic.className = state;
}

async function start(){
  //noprotect
  while(1){
    setState('wait');
    await wait(1000);
    setState('stop');
    await wait(3000);
    setState('pass');
    await wait(3000);
  }
}

start();

将setTimeOut方法封装成wait函数，这个函数将setTimeOut方法用promise包裹起来，并返回这个Promise对象。

有了这个wait函数之后，原本有些晦涩的setTimeOut嵌套，可以很容易改写成一个async函数中的await循环。