javascript - setInterval為什麼只執行一次

Question

• 簡單的背景切換

#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（）只執行了一次，就想問為啥進入不了第二次？

#各位大佬不要鄙視我，感謝您的解答~

Answer 1

不是鄙視你，但這明顯是語法問題……實際上我認為setInterval 一直都在執行，但是你的函數direct 的運行結果是固定的，循環的最終結果是第二張顯示第一張隱藏，所以看起來好像沒執行一樣。

你應該這樣做：

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

這裡用到了閉包，把狀態保存在定時器的外面，才能夠每次往下循環。

另外再補充一點渲染的知識。對於這種用 for 循環改變視圖狀態，瀏覽器會把這些狀態都緩存起來，然後擇機渲染，而不是你一修改它就立刻渲染。所以你連閃一下都看不到。

Answer 2

參考一下

$(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 3

setInterval(function direct(){

雷雷

Answer 4

循環一次之後i的值為1 然後就一直是1 用let試試

Answer 5

你是不是要的這種效果，依序一個一個顯示？

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 6

$(函數(){

雷雷

}）

Answer 7

setInterval(direct(),1000);

不知道對不對，但總覺得是這個的問題