JS对象赋值无效？

Question

本意：
循环执行3个函数，来改变ul节点的className，2秒后执行wait，3秒后执行stop，1秒后执行pass，依次循环。
HTML部分

 <ul id="traffic" class="wait">     <li><span></span></li>
     <li><span></span></li>
     <li><span></span></li>
  </ul>

JS部分

var statusList=[

      {

        func:function(){

          traffic.className='wait';

        },

        timer:2000

      },

      {

        func:function(){

          traffic.className='stop';

        },

        timer:3000

      },

      {

        func:function(){

          traffic.className='pass';

        },

        timer:1000

      }

      ];

      

    var currentIndex = 0;

    var statusObj=statusList[currentIndex];

    setInterval(

        function(){

            statusObj.func();

            debugger;

            currentIndex=(currentIndex+1)%statusList.length;

            console.log(currentIndex);

        },

        statusObj.timer

    );

即使右边的statusList[currentIndex]在改变，statusObj变量一直是statusList[0],哪里有问题？

Answer 1

哥们，你只更新了下标序号，没有更新statusObj对象啊，它只被赋值了一次，就是数组内的第一个元素啊，你可以将 function(){                 statusObj.func();                debugger;                 currentIndex=(currentIndex+1)%statusList.length;                console.log(currentIndex);             }改成function(){                 statusObj.func();                debugger;                 currentIndex=(currentIndex+1)%statusList.length;                 statusObj = statusList[currentIndex];                console.log(currentIndex);             }