好程序员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()

                 })

         })();