Home  >  Q&A  >  body text

javascript - Why is setInterval only executed once?

jquery part

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

            setInterval(direct,1000);
        })

html section

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

css part

.bg2 default display:none;

Dear bosses, please don’t despise me, thank you for your answers~

黄舟黄舟2692 days ago969

reply all(7)I'll reply

  • ringa_lee

    ringa_lee2017-06-30 09:57:19

    Not to despise you, but this is obviously a syntax problem... In fact, I think setInterval is always executed, but the running result of your function direct is fixed. The final result of the loop is that the second picture is displayed and the first picture is hidden. , so it looks like it's not executed.

    You should do this:

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

    A closure is used here to save the state outside the timer so that it can be looped down each time.

    In addition, add some knowledge about rendering. For this kind of for loop to change the view state, the browser will cache these states and then render them at an appropriate time, instead of rendering them immediately as soon as you modify it. So you can't even see it flash.

    reply
    0
  • 学习ing

    学习ing2017-06-30 09:57:19

    Please refer to it

    $(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);
    })

    reply
    0
  • 習慣沉默

    習慣沉默2017-06-30 09:57:19

    setInterval(function direct(){

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

    reply
    0
  • 滿天的星座

    滿天的星座2017-06-30 09:57:19

    After looping once, the value of i is 1 and then it remains 1. Try using let

    reply
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-06-30 09:57:19

    Do you want this effect to be displayed one by one in order?

    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);
    });

    reply
    0
  • 为情所困

    为情所困2017-06-30 09:57:19

    $(function(){

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

    })

    reply
    0
  • 滿天的星座

    滿天的星座2017-06-30 09:57:19

    setInterval(direct(),1000);

    I don’t know if it’s right, but I always feel that this is the problem

    reply
    0
  • Cancelreply