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

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

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 2

以下是其他任何人的答案 - 感谢Mike

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


});

Answer 3

我会尝试这样的事情：

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

要重复这些时间事件，您应该使用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 5

JsFiddle

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

一段时间后重置setTimeout

5 个答案: