javascript - Mengapa setInterval hanya dilaksanakan sekali?

Question

• Penukaran latar belakang yang mudah

bahagian jquery

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

            setInterval(direct,1000);
        })

bahagian html

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

bahagian css

.bg2 paparan lalai:tiada;

• setInterval() hanya dilaksanakan sekali, jadi saya ingin bertanya mengapa ia tidak boleh dimasukkan untuk kali kedua?

Kawan-kawan, jangan hina saya, terima kasih atas jawapan anda~

Answer 1

Bukan untuk menghina anda, tetapi ini jelas merupakan masalah sintaks... Sebenarnya, saya fikir setInterval sentiasa dilaksanakan, tetapi hasil fungsi anda direct telah ditetapkan Hasil akhir gelung ialah gambar kedua dipaparkan dan gambar pertama disembunyikan, jadi Nampaknya ia tidak dilaksanakan.

Anda harus melakukan ini:

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

Penutupan digunakan di sini untuk menyimpan keadaan di luar pemasa supaya ia boleh digelung ke bawah setiap kali.

Juga tambahkan sedikit pengetahuan tentang rendering. Untuk gelung for jenis ini untuk menukar keadaan paparan, penyemak imbas akan cache keadaan ini dan kemudian memberikannya pada masa yang sesuai, bukannya memberikannya serta-merta sebaik sahaja anda mengubah suainya. Jadi anda tidak dapat melihatnya berkelip.

Answer 2

Sila rujuk

$(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(fungsi langsung(){

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

Answer 4

Selepas gelung sekali, nilai i ialah 1 dan kemudian kekal 1. Cuba gunakan let

Answer 5

Adakah anda mahu kesan ini dipaparkan satu persatu mengikut urutan?

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

$(fungsi(){

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

})

Answer 7

setInterval(direct(),1000);

Saya tidak tahu sama ada ia betul, tetapi saya sentiasa merasakan bahawa ini adalah masalahnya