javascript - JS对象赋值无效？

问题描述

问 题

本意：
循环执行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],哪里有问题？

解决方案

哥们，你只更新了下标序号，没有更新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);
            }

这篇关于javascript - JS对象赋值无效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！