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

i大于3的时候，i=-1了。同时这次没有执行changeClass(i)
if(i > 3) i = 0;changeClass(i)

Answer 3

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

Answer 4

if(i<3){
    changeClass(i);
}else{
    changeClass(i);
    i = -1 
}

？

Answer 5

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