JS で Promise を使用して信号機サンプル コードを実装する (デモ)

この記事では、サンプルコードを通じて、JS で Promise を使用して信号機の効果を実現する方法を紹介します。また、JS での 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()
  })
  })();

以上、編集者が紹介したPromiseをJSで使って信号機を実装するサンプルコード(デモ)です。 ！

関連する推奨事項:

jQuery での Promise の具体的な使用方法

完全な Promise を実装する方法

Promise オブジェクトの簡単な使用方法について

以上がJS で Promise を使用して信号機サンプル コードを実装する (デモ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。