Question

我写过这个简单的旋转木马。目前我正在使用setInterval以一定的时间间隔运行我的nextSlide函数。我想在用户点击导航链接一段时间后推迟计时器的运行。

关于如何编写其余内容的任何反馈都会很好。

Answer 1

您可以执行以下操作：http://jsbin.com/uzixi3/5/edit

间隔部分在这里：

var int = setInterval($.fn.nextSlide, 3000);
$("#slideNavigation a").click(function() {
  clearInterval(int);
  setTimeout(function() {
    setInterval($.fn.nextSlide, 3000);
  }, 10000);
});

我做了一些其他的调整，例如，您可以使用switch语句使.nextSlide()更具可读性和更便宜。

总的来说，没有理由将这些函数作为jjquery本身的扩展方法，因为它们不与对象交互，它们可以只是作用于闭包的方法，如下所示：http://jsbin.com/uzixi3/6/edit

如果这些方法实际上在$('#slideContainer')上运行，例如$('#slideContainer').nextSlide()在您使用this.animate()和this.css()的方法中，它可能会更有意义，只是一些可以帮助您在出发时更加灵活的想法。

Answer 2

您可以将setInterval的返回值保存在变量中以便稍后引用它 - 这样您就可以在需要时取消它，或者重新启动它。

有关详细信息，请参阅this MDC article。

基础知识是：

intervalID = setInterval(flashText, 1000);

//do something...

clearInterval(intervalID);

Answer 3

以上代码确实有帮助。谢谢尼克。我做了一些小的调整，一旦你点击了这个功能：定时器会停止，函数会执行，然后定时器启动并恢复定期的间隔。

确保您将var int重新分配给您在interval内创建的新click function。

var int = setInterval(change_slide, 5000);
$("#div").click(function() {
    console.log('clicked');
  clearInterval(int);
  setTimeout(function() {
  int = setInterval(change_slide, 5000);
  });
});

Answer 4

请参阅：

var IntID = setTimer();

function setTimer(){
    i = setInterval(startSlider, 4000);
    return i;
}

function stopSlider() {
    clearInterval(IntID);
}

//Restart Timer

// Option 1 make a restartSlider function and call it
$("#button").click(restartSlider);
function restartSlider(){
    IntID = setTimer();
}

//Option 2 create an anonymous function only for that click event.
$("#button").click(function(){
    IntID = setTimer();
});

单击时重置setinterval

4 个答案: