javascript - 一段时间后重置 setTimeout

Question

努力锻炼“clearTimeout”适合此流程的地方：

$(window).ready(function() {

  setTimeout(function() {
    $('.hoverone').addClass('flip');
  }, 2000);

  setTimeout(function() {
    $('.hovertwo').addClass('flip');
  }, 2500);

  setTimeout(function() {
    $('.hoverone').removeClass('flip');
  }, 4000);

  setTimeout(function() {
    $('.hovertwo').removeClass('flip');
  }, 4500);

});

完成最后一个操作后 - 我希望重置计时器并重新开始流程。我尝试了 clearTimeout，但我需要完成非常具体的定时操作流程。

Answer 1

我会尝试这样的事情：

$(window).ready(function() {

  //all setTimeouts start (almost) the same time
  var time1 = 2000,
      time2 = time1 + 500,
      time3 = time2 + 1500,
      time4 = time3 + 500,
      repeatTime = time4 + 1000; //delay before the restart

  //this will run again and again until you stop it
  //basically it will start over after 1 second after the 4th settimeout is finished
  var Fn = setInterval(function() {
    setTimeout(function() {
      $('.hoverone').addClass('flip');
    }, time1);

    setTimeout(function() {
      $('.hovertwo').addClass('flip');
    }, time2);

    setTimeout(function() {
      $('.hoverone').removeClass('flip');
    }, time3);

    setTimeout(function() {
      $('.hovertwo').removeClass('flip');
    }, time4);
  }, repeatTime);

  //this is how you stop it from repeating anymore
  //clearInterval(Fn);
});

我认为这是不言自明的，但请随时进一步提问。

Answer 2

要重复这些时间事件，您应该使用setInterval. 此外，您可以将四个操作组合到一个函数中：

$(window).ready(function(){       
    var halfSeconds = 0;
    var timer = setInterval(function() {   
        halfSeconds = (halfSeconds + 1) % 12; // change the 12 to adjust repeat-delay
        if (halfSeconds === 4) $('.hoverone').addClass('flip'); 
        if (halfSeconds === 5) $('.hovertwo').addClass('flip'); 
        if (halfSeconds === 8) $('.hoverone').removeClass('flip'); 
        if (halfSeconds === 9) $('.hovertwo').removeClass('flip');
    },
    500);

    // Optional: if you have an event that should stop the repetition:
    $('#myStopButton').click(function() {
        clearInterval(timer);
    });
});

保留返回值也很有用，setInterval这样您就可以在某些事件发生时停止动画（例如单击“停止”按钮）。

Answer 3

提琴手

$(window).ready(function(){     
var hoverone,hovertwo;
call();
function call(){
       hoverone= setTimeout(function() {   
          $('.hoverone').addClass('flip'); 
          clearTimeout(hovertwo);
          call1();
      },
        2000);
  }

  function call1(){
          hovertwo =  setTimeout(function() {   
          $('.hovertwo').addClass('flip');
          clearTimeout(hoverone);
          call2();
      }, 2500);
  }
  function call2(){
          hovertwo =  setTimeout(function() {   
          $('.hoverone').removeClass('flip');
          clearTimeout(hoverone);
          call3();
      }, 2500);
  }
  function call3(){
          hovertwo =  setTimeout(function() {   
          $('.hovertwo').removeClass('flip');
          clearTimeout(hoverone);
          call();
      }, 2500);
  }
});

Answer 4

我建议您使用将所有设置的超时包装在一个函数中。这样你就不需要清除超时。

var intervalFunction = function(){
  setTimeout(function() {
     $('.hoverone').addClass('flip');
  }, 2000);

  setTimeout(function() {
     $('.hovertwo').addClass('flip');
  }, 2500);

  setTimeout(function() {
     $('.hoverone').removeClass('flip');
  }, 4000);

  setTimeout(function() {
    $('.hovertwo').removeClass('flip');
    intervalFunction();
  }, 4500);
}

$(window).ready(intervalFunction);

Answer 5

这是其他人的答案-感谢迈克

$(window).ready(function flow(){        


  setTimeout(function() {   
    $('.hoverone').addClass('flip'); 
},
  2000);

  setTimeout(function() {   
    $('.hovertwo').addClass('flip'); 
},
  2500);

   setTimeout(function() {   
    $('.hoverone').removeClass('flip'); 
},
  4000);

     setTimeout(function() {   
    $('.hovertwo').removeClass('flip'); 
},
  4500);

 setInterval( flow, 8000 );


});