需求：做一个红绿灯组件，绿灯亮10秒，黄灯亮5秒，红灯亮2秒，循环往复

    1. //先写一个高亮工具函数
    2. function lightenTool(lightType){
    3.     const lightDomArr= [...document.getElementsByClass('lights')],
    4.               currentLight = document.getElementsByClass(lightType)[0];
    5.   //先清除所有元素高亮类名
    6.   lightDomArr.forEach((elem)=>{
    7.       elem.classList.remove('lighten')
    8.   })
    9.   //给当前颜色信号灯添加高亮类名
    10.   currentLight.classList.add('lighten')
    11.   cosnole.log(lightType)
    12. }
    14. // 1、传统递归不嵌套方法
    15. funcion lightsGo(){
    16.   lightenTool('green')
    17.     setTimeout(function(){
    18.       lightenTool('yellow')
    19.   },10000)
    20.   setTimeout(function(){
    21.       lightenTool('red')
    22.     lightsGo()
    23.   },15000)
    24.   setTimeout(function(){
    25.     lightsGo()
    26.   },17000)
    27. }
    29. //2、传统回调嵌套方法,复杂、难维护
    30. function lightsGo(){
    31.     lightenTool('green')
    32.   setTimeout(function(){
    33.       lightenTool('yellow')
    34.     setTimeout(function(){
    35.       lightenTool('red')
    36.         setTimeout(function(){
    37.           lightsGo()
    38.       },2000)
    39.     },5000)
    40.   },10000)
    41. }
    43. //3、promise链式调用
    44. function lightenTool(type){
    45.     console.log(type)
    46. }
    49. function sleep(time){
    50.     return new Promise((resolve)=>{
    51.       setTimeout(()=>{
    52.       resolve()
    53.     },time)
    54.   })
    55. }
    57. //function promiseResolve(callback,time){
    58. //    return new Promise((resolve)=>{
    59. //      setTimeout(()=>{
    60. //       console.log(callback)
    61. //      resolve()
    62. //    },time)
    63. //  })
    64. //}
    65. // 这个函数没有遵循单一功能原则，把回调函数和异步等待功能耦合在一起，对后续使用造成了困难
    67. function lightsGo(){
    68.     lightenTool('green');
    69.   sleep(10000)
    70.   .then(()=>{
    71.     lightenTool('yellow');
    72.     return sleep(5000)
    73.   })
    74.   .then(()=>{
    75.     lightenTool('red');
    76.         return sleep(2000)
    77.   })
    78.   .then(()=>{
    79.       lightsGo()
    80.   })
    81. }
    83. lightsGo()
    85. //3.async和await同步写法
    86. function lightenTool(type){
    87.     console.log(type)
    88. }
    90. function sleep(time){
    91.     return new Promise((resolve)=>{
    92.       setTimeout(()=>{resolve()},time)
    93.   })
    94. }
    96. async function lightsGo(){
    97.     lightenTool('green')
    98.   await sleep(10000);
    99.   lightenTool('yellow')
    100.   await sleep(5000);
    101.   lightenTool('red')
    102.   await sleep(2000);
    103.   lightsGo()
    104. }
    106. //还可以改进用while do来写，不用递归
    108. async function lightsGo(){
    109.   while(true){
    110.       lightenTool('green')
    111.     await sleep(10000);
    112.     lightenTool('yellow')
    113.     await sleep(5000);
    114.     lightenTool('red')
    115.     await sleep(2000);
    116.   }
    117. }