好程序员web前端培训分享前端javascript练习题之promise

当前位置：首页 / 技术干货 / 正文

2019-11-28

HTML5 好程序员 web前端培训 javascript

好程序员web前端培训分享前端javascript练习题之promise
promise-ajax的封装
function ajax(url){//创建promise对象
   var promise = new Promise(function(resolve,reject){
   //创建ajax对象
         if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
         }else{
            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }
         
         xhr.open("get",url,true);
         xhr.send();
         
         xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
               if(xhr.status == 200){
                  var data = xhr.responseText;
                  resolve(data);
               }else{
                  reject();
               }
            }
         }
   
   })
   return promise;  //返回promise对象}
红绿灯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(function(resolve, reject) {
                setTimeout(resolve, timer)
                     })
                 }
             }
         var green = timeout(1000);
         var yellow = timeout(1000);
         var red = timeout(1000);
         var traffic = document.getElementById("traffic");
        
         (function restart() {
             'use strict' //严格模式
             traffic.className = 'green';
             green().then(function() {
                     traffic.className = 'yellow';
                     return yellow();
                 })
                 .then(function() {
                     traffic.className = 'red';
                     return red();
                 }).then(function() {
                     restart()
                 })
         })();