javascript - setInterval为什么只执行一次

问题描述

简单的背景切换

jquery部分

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

html部分

<p class='main_bg'><p class='bg_img bg1'></p><p class='bg_img bg2'></p> </p>

css部分

.bg2默认display:none;

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

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

问题解答

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

你应该这样做：

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

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

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

参考一下

$(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);})回答3：

setInterval(function direct(){

for(var i=0;i<2;i++){ $('.bg_img').eq(i).show().siblings().hide(); }},1000); 直接这样试试，控制台看看，有没有报错，如果报错的话，js也不会继续执行了的。回答4：

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

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

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);});回答6：

$(function(){

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

})

setInterval(direct(),1000);

不知道对不对，但是总感觉是这个的问题