javascript setInterval()函数

Question

用setInterval()函数动态给li添加css

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li> 4 </li>
  </ul>

var i = -1;
setInterval(function(){
  i++;.
  console.log(i);
  (i > 3) ? i = -1 : changeClass(i);

}, 1000);

function changeClass(j) {
  $('li').eq(j).addClass('cur').siblings().removeClass('cur');
}

发现i的变化是 0->1->2->3->4->0->1->2->3->4这样， 也就意味着下标为3的li添加css 后， 中间会间隔1s， 才会继续动态切换， 因为没有下标为4的li， 这是什么情况造成的

Answer 1

因为 (i > 3) ? i = -1 : changeClass(i); 三元运算，

当i=4的时候 (i > 3) ? 意思就是 4大于3吗？，4肯定大于3就执行i = -1，

就不会执行changeClass(i)这个函数，所以没有下标为4的li

Answer 2

雷雷

Answer 3

0 - 3就已经4个了， 你写的(i > 3)才会变成-1， 也就是说要运行五次才会变成-1；
如果你想运行4次就变成-1应该改成 (i >= 3)

Answer 4

雷雷

？

Answer 5

第四个永远挂不上 所以建议把i>3 改为i>4或者i>=3