首頁 >web前端 >js教程 >JS 中使用Promise 實作紅綠燈實例碼(demo)

JS 中使用Promise 實作紅綠燈實例碼(demo)

韦小宝原創: 2018-01-11 10:16:272610瀏覽

本文透過實例程式碼介紹了JS 中使用Promise 實現紅綠燈效果，在文中給大家介紹了一個promise用法範例,不了解js中如何使用Promise的朋友可以參考下本篇文章

要求

使用promise 實作紅綠燈顏色的跳轉
綠燈執行三秒後
黃燈執行四秒後
#紅燈執行五秒

##html 實現如下：

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

定義一個空類，之後再js中操作對應的類別名稱即可實現相關的效果。

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

javascript 原理：

promise函數為非同步運算函數，在函數執行結束時可以使用then()方法。我們再在promise函數內部設定延遲執行即可實現。

js 程式碼如下：

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

ps:下面看一個Promise用法範例

注意：要想then方法能鍊式的執行下去，必須回傳Promise物件！！！

&#39;use strict&#39;; 
 
function async(value) { 
  return new Promise(function(resolve, reject) { 
    var ms = Math.round(Math.random() * 1000); 
    setTimeout(function() { 
      console.log(&#39;waiting &#39; + ms + &#39;ms&#39;); 
      // 等待ms毫秒 
      resolve(value + ms); 
    }, ms); 
  }); 
} 
// 每次执行随机等待n毫秒，结果统计总毫秒数 
async(0) 
.then(async) 
.then(async) 
.then(async) 
.then(async) 
.then(function(value) { 
  console.log(&#39;------total wait:&#39; + value + &#39;ms&#39;); 
}); 
//////////////////////////////////////////////////////////// 
function async1(value) { 
  return new Promise(function(resolve, reject) { 
    resolve(value + 1); 
  }); 
} 
function async2(value) { 
  // return new Promise(function(resolve, reject) { 
  //   resolve(value + 2); 
  // }); 
  // 等价与上面写法 
  return Promise.resolve(value + 2); 
} 
function async3(value) { 
  return new Promise(function(resolve, reject) { 
    resolve(value + 3); 
  }); 
} 
async1(100).then(async2).then(async3).then(function(value) { 
  console.log(&#39;------&#39; + value); 
}); 
///////////////////////////////////////////////////////////////// 
function say() { 
  var value = &#39;what&#39;; 
  return Promise.resolve(value); 
} 
say().then(function(value) { 
  value = value + &#39; are&#39;; 
  return Promise.resolve(value); 
}).then(function(value) { 
  value = value + &#39; you&#39;; 
  return Promise.resolve(value); 
}).then(function(value) { 
  value = value + &#39; doing&#39;; 
  return Promise.resolve(value); 
  //return Promise.reject(&#39;error, exit&#39;); // 中途退出 
}).then(function(value) { 
  value = value + &#39; now!&#39;; 
  return Promise.resolve(value); 
}).then(function(value) { 
  console.log(&#39;------&#39; + value); 
}).catch(function(error) { 
  console.log(&#39;------&#39; + error); 
}); 
<html> 
<head> 
  <title>Ball move</title> 
  <style type="text/css"> 
    .ball { 
      width: 40px; 
      height: 40px; 
      border-radius: 20px; 
      margin-left: 10px; 
    } 
    .ball1 { 
      background: #ff0000; 
    } 
    .ball2 { 
      background: #00ff00; 
    } 
    .ball3 { 
      background: #0000ff; 
    } 
  </style> 
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
</head> 
<body> 
  <p class="ball ball1"></p> 
  <p class="ball ball2"></p> 
  <p class="ball ball3"></p> 
  <script type="text/javascript"> 
    function moving(ball, pos) { 
      return new Promise(function(resolve, reject) { 
        var marginLeft = parseInt(ball.css(&#39;margin-left&#39;)); 
        if (marginLeft != pos) { 
          var timerId = setInterval(function() { 
            marginLeft = marginLeft + 1; 
            ball.css(&#39;margin-left&#39;, marginLeft); 
            if (marginLeft == pos) { 
              clearInterval(timerId); 
              resolve(); 
            } 
          }, 20); 
        } else { 
          resolve(); 
        } 
      }); 
    } 
    moving($(&#39;.ball1&#39;), 100).then(function() { 
      return moving($(&#39;.ball2&#39;), 150); 
    }).then(function() { 
      return moving($(&#39;.ball3&#39;), 200); 
    }); 
  </script> 
</body> 
</html>

以上所述是小編給大家介紹的JS 中使用Promise 實作紅綠燈實例碼(demo)，希望對大家有幫助！！

JS 中使用Promise 實作紅綠燈實例碼(demo)

相關文章