015-Generator（异步编程的一种解决方案）

/**
 *
 * Generator
 *    概念：异步编程的一种解决方案
 *
 *    next函数的用法 （继续执行下一个yield）
 *    yield*的用法（遇到yield会停止，意味一个步骤）
 * 应用场景
 *    抽奖实例
 *    长轮询
 *
 */

{ // genertaor基本定义
  let tell=function* (){
    yield 'a';
    yield 'b';
    return 'c'
  };

  let k=tell();       //执行第一个yield之前的代码

  console.log(k.next());  //执行第一个yield
  console.log(k.next());  //执行第二个yield
  console.log(k.next());  //执行第三个yield
  console.log(k.next());  //undifind
  //以next()和yield相结合达到异步编程的目的
}


{ //通过Generator实现Iterator
  let obj={};
  obj[Symbol.iterator]=function* (){
    yield 1;
    yield 2;
    yield 3;
  }

  for(let value of obj){
    console.log('value',value);// 1 2 3
  }
}


{ //状态集
  let state=function* (){
    while(1){
      yield 'A';
      yield 'B';
      yield 'C';
    }
  }
  let status=state();
  console.log(status.next()); //A
  console.log(status.next()); //B
  console.log(status.next()); //C
  console.log(status.next()); //A
  console.log(status.next()); //B
}


// { //Generator语法糖
//   let state=async function (){
//     while(1){
//       await 'A';
//       await 'B';
//       await 'C';
//     }
//   }
//   let status=state();
//   console.log(status.next());
//   console.log(status.next());
//   console.log(status.next());
//   console.log(status.next());
//   console.log(status.next());
// }
//


/* 实例场景 *********************************************/
{ //前段抽奖
  let draw=function(count){
    //具体抽奖逻辑
    console.info(`剩余${count}次`)
  }

  //通过Generator对次数进行限制
  let residue=function* (count){
    while (count>0) {
      count--;
      yield draw(count);
    }
  }

  let star=residue(5);
  let btn=document.createElement('button');
  btn.id='start';
  btn.textContent='抽奖';
  document.body.appendChild(btn);
  document.getElementById('start').addEventListener('click',function(){
    star.next();
  },false)
}


/**
 * 长轮询
 * 服务端的某一个数据状态定期的去变化，客户端需要定时的去服务端取这个状态
 * 两种做法：
 *    1：webscoket（兼容性不太好）
 *    2: 长轮询
 *
 */
{ //长轮询
  let ajax=function* (){
    yield new Promise(function(resolve,reject){
      setTimeout(function () {//模拟AJAX过程
        resolve({code:0})
      }, 200);
    })
  }


  let pull=function(){
    let genertaor=ajax(); //实例化
    let step=genertaor.next(); //取得当前步骤
    step.value.then(function(d){
      if(d.code!=0){
        setTimeout(function () {
          console.info('wait');
          pull();   //不断去轮询
        }, 1000);
      }else{
        console.info(d);
      }
    })
  }

  pull();
}