つの走馬灯のいくつかの設計の構想

"traffic" class="wait">
  

  

  




#traffic > li{
  display: block;
}
 
#traffic span{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: gray;
  margin: 5px;
  border-radius: 50%;
}
 
#traffic.stop li:nth-child(1) span{
  background-color: #a00;
}
 
#traffic.wait li:nth-child(2) span{
  background-color: #aa0;
}
 
#traffic.pass li:nth-child(3) span{
  background-color: #0a0;
}

const traffic = document.getElementById("traffic");
 
(function reset(){
  traffic.className = "wait";
 
  setTimeout(function(){
      traffic.className = "stop";
      setTimeout(function(){
        traffic.className = "pass";
        setTimeout(reset, 2000)
      }, 2000)
  }, 2000);
})(); 
   

const traffic = document.getElementById("traffic");
 
var stateList = ["wait", "stop", "pass"];
 
var currentStateIndex = 0;
 
setInterval(function(){
  var state = stateList[currentStateIndex];
  traffic.className = state;
  currentStateIndex = (currentStateIndex + 1) % stateList.length;
}, 2000);

2補充--普通青年レベル~。

const traffic = document.getElementById("traffic");
 
function start(traffic, stateList){
  var currentStateIndex = 0;
 
  setInterval(function(){
    var state = stateList[currentStateIndex];
    traffic.className = state;
    currentStateIndex = (currentStateIndex + 1) % stateList.length;
  }, 2000);
}
 
start(traffic, ["wait", "stop", "pass"]);

 
3高校レベル～過程の抽象

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

function poll(...fnList){
  let stateIndex = 0;
 
  return function(...args){
    let fn = fnList[stateIndex++ % fnList.length];
    return fn.apply(this, args);
  }
}
 
function setState(state){
  traffic.className = state;
}
 
let trafficStatePoll = poll(setState.bind(null, "wait"),
                            setState.bind(null, "stop"),
                            setState.bind(null, "pass"));
 
setInterval(trafficStatePoll, 2000);

4大学のバージョン~各種の新しい特性ははは

const traffic = document.getElementById("traffic");
 
function wait(time){
  return new Promise(resolve => setTimeout(resolve, time));
}
 
function setState(state){
  traffic.className = state;
}
 
function reset(){
  Promise.resolve()
    .then(setState.bind(null, "wait"))
    .then(wait.bind(null, 1000))
    .then(setState.bind(null, "stop"))
    .then(wait.bind(null, 2000))
    .then(setState.bind(null, "pass"))
    .then(wait.bind(null, 3000))
    .then(reset);
}
 
reset();

5宇宙バージョン…今はちょっと分かりません。残してみます。

const trafficEl = document.getElementById("traffic");
 
function TrafficProtocol(el, reset){
  this.subject = el;
  this.autoReset = reset;
  this.stateList = [];
}
 
TrafficProtocol.prototype.putState = function(fn){
  this.stateList.push(fn);
}
 
TrafficProtocol.prototype.reset = function(){
  let subject = this.subject;
 
  this.statePromise = Promise.resolve();
  this.stateList.forEach((stateFn) => {
    this.statePromise = this.statePromise.then(()=>{
      return new Promise(resolve => {
        stateFn(subject, resolve);
      });
    });
  });
  if(this.autoReset){
    this.statePromise.then(this.reset.bind(this));
  }
}
 
TrafficProtocol.prototype.start = function(){
  this.reset();
}
 
var traffic = new TrafficProtocol(trafficEl, true);
 
traffic.putState(function(subject, next){
  subject.className = "wait";
  setTimeout(next, 1000);
});
 
traffic.putState(function(subject, next){
  subject.className = "stop";
  setTimeout(next, 2000);
});
 
traffic.putState(function(subject, next){
  subject.className = "pass";
  setTimeout(next, 3000);
});
 
traffic.start();

参考:http://mp.weixin.qq.com/s?__MzAxODE 2 MzAxODE 2 Mumum=&mid=2651551635& idx=1&sn=a 7 d 6 e 90 a 94 ef 854 a 94em 578 a 9 de70015&chksm=8025 a 052 b 7522944444443 a 3 a 89745 ded0 cccccbababab 1 f 1 f 1 f 1 f 1 f 6 f 6 f 0101013 f 1 f 1 f 6 f 6 f 6 f 1 f 1 f 1 f 3 f 1 f 1 f 1 f 3 f 3 f 3 f 1 f 1 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 f 3 hド
http://www.cnblogs.com/yunfeifei/p/4453690.html
転載先:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6262564.html