一段时间后重置 setTimeout答案

【问题标题】：Reset setTimeout after a period of time一段时间后重置 setTimeout
【发布时间】：2016-04-19 11:03:48
【问题描述】：

在“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，但我需要完成非常具体的定时操作流程。

【问题讨论】：

clearTimeout
在您的示例中没有重复的计时器来“重置”（它们本来是setInterval）。练习的目的是什么？
你有没有试过像循环一样调用函数！！！
@RayonDabre 是对的。阅读如何使用setTimeout/clearTimeouts。 tl;dr - 将setTimeout() 存储在一个变量中，然后使用clearTimeout(myVariable)。
嗨，evolutionxbox - 我可以为点击功能工作，但似乎无法将定时元素配置为自动重置

标签： javascript jquery settimeout cleartimeout

【解决方案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);

【讨论】：

【解决方案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 );


});

【讨论】：

这是不正确的，因为它将继续创建间隔计时器（每 8 秒创建一个额外的计时器，而之前的计时器仍在继续运行）。视觉效果还是可以的，但是浏览器迟早会耗尽资源。
经过测试非常正确 - 我认为发布的其他解决方案肯定效果更好。谢谢
您现在使用哪种方法？因为我不认为，我们需要为超时清除超时，因为它们一旦执行就消失了。并且 setInterval 设置为重复运行。所以只是想知道哪种方法最适合您。
zedling 的方法效果很好 - 将时间设置在一个地方对我的目的也非常有用谢谢您的帮助

【解决方案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);
});

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

要重复这些时间事件，您应该使用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 的返回值也很有用，这样您就可以在某些事件发生时停止动画（例如单击“停止”按钮）。

【讨论】：

@JackAllen，如果这个答案解决了你的问题，你能告诉我吗？能否给点意见？