setInterval为什么只执行一次

Question

• 简单的背景切换

jquery部分

$(function(){
            
            function direct(){
                
                for(var i=0;i<2;i++){
                $(".bg_img").eq(i).show().siblings().hide();
                }
            }

            setInterval(direct,1000);
        })

html部分

<div class="main_bg">
        <div class="bg_img bg1"></div>
        <div class="bg_img bg2"></div>
    </div>

css部分

.bg2默认display:none;

• setInterval（）只执行了一次，就想问为啥进入不了第二次？

各位大佬不要鄙视我，感谢您的解答~

Answer 1

for(var i=0;i<2;i++){
    $(".bg_img").eq(i).show().siblings().hide();
}

这段代码一直在执行 但是 执行结果都是i=1的显示 i=0的隐藏。
html：

<div class="div-box">
    <div class="div-item div-item0" data-index="0"></div>
    <div class="div-item div-item1" data-index="1"></div>
</div>

js：

var divItems = document.querySelectorAll('.div-item'),
    i = 0;
function test() {
    for ( var k = 0 ; k < 2; k++ ) {
        divItems[k].style.display = 'none';
    }
    document.querySelector( '.div-item' + i ).style.display = 'block';
    i == 0 ? i = 1 : i = 0;
}
setInterval(test, 1000);

Answer 2

不是鄙视你，但这明显是语法问题……实际上我认为 setInterval 一直都在执行，但是你的函数 direct 的运行结果是固定的，循环的最终结果是第二张显示第一张隐藏，所以看起来好像没执行一样。

你应该这样做：

var current = 0;
function direct(){
  $(".bg_img").eq(current).show()
    .siblings().hide();
  current++;
  if (current > 1) {
    current = 0;
  }  
}

这里用到了闭包，把状态保存在定时器的外面，才能够每次往下循环。

另外再补充一点渲染的知识。对于这种用 for 循环改变视图状态，浏览器会把这些状态都缓存起来，然后择机渲染，而不是你一修改它就立刻渲染。所以你连闪一下都看不到。

Answer 3

参考一下

$(function(){
  function direct(i){
    $(".bg_img").eq(i).show().siblings().hide();
  }

  var i = 0;
  setInterval(function () {
    direct(i)
    i = (i + 1) % $(".bg_img").length
  }, 1000);
})

Answer 4

你可以在for循环输出i

for(var i=0;i<2;i++){
     $(".bg_img").eq(i).show().siblings().hide();
     console.log(i);
}

你会发现输出0,1然后一秒之后接着输出0,1，并不你所希望的先输出0，一秒之后输出1
所以这不是setInterval的问题，是你代码的问题

Answer 5

。。。。。。和定时器无关，你要知到for循环执行的有多快，这个direct中的效果，我给你描述一下啊：第一张显式第二张消失，飒~（0.0000001s后）第二张显式第一张消失。就算你把定时器的时间设置的再长，你也只能看见一个效果

Answer 6

setInterval(function direct() {
    for(var i=0;i<2;i++) {
        $(".bg_img").eq(i).show().siblings().hide();
    }
}, 1000);

直接这样试试，控制台看看，有没有报错，如果报错的话，js也不会继续执行了的。

Answer 7

循环一次之后i的值为1 然后就一直是1 用let试试

Answer 8

你是不是要的这种效果，按顺序一个一个显示？

jQuery(function($){
    var bgImg = $(".bg_img"),
        maxIndex = bgImg.length - 1,
        i = 0;

    function direct(){
        bgImg.eq(i).show().siblings().hide();

        if (i < maxIndex) {
            i++;
        } else {
            i = 0;
        }
    }

    setInterval(direct, 1000);
});

Answer 9

$(function(){

var index = 0;
setInterval(function(){
    (index < $('.bg_img').length) ? index ++ : index = 0;
    $('.bg_img').eq(index).show().siblings().hide();
},1000);

})