在clearInterval按钮后的5秒内再次设置setInterval

时间:2012-01-27 05:37:15

标签: javascript jquery setinterval clearinterval

我正在做一个自动循环幻灯片的内容滑块(通过使用setInterval定期调用“下一个”功能)但是当用户点击上一个/下一个按钮时停止(使用clearInterval在prev / next按钮上)。有几种方法在点击按钮几秒后再次使用setInterval

代码:

// start to automatically cycle slides
var cycleTimer = setInterval(function () {
   $scroll.trigger('next');
}, 450);

// set next/previous buttons as clearInterval triggers 
var $stopTriggers = $('img.right').add('img.left'); // left right

// function to stop auto-cycle
function stopCycle() {
   clearInterval(cycleTimer); 
}

1 个答案:

答案 0 :(得分:7)

setInterval放入函数中,然后使用setTimeout()调用该函数。

setInterval()setTimeout()之间的区别在于setInterval()在每个时间间隔重复调用您的函数,而setTimeout()仅在指定的延迟后调用您的函数一次。

在下面的代码中,我添加了一个函数startCycle()。将该函数调用,以及立即启动循环,以便它自动启动并从现有stopCycle()函数中设置的超时开始。

var cycleTimer;

function startCycle() {
   cycleTimer = setInterval(function () {
      $scroll.trigger('next');
   }, 450);
}

// start to automatically cycle slides
startCycle();

// set next/previous buttons as clearInterval triggers 
var $stopTriggers = $('img.right').add('img.left'); // left right

// function to stop auto-cycle
function stopCycle() {
   clearInterval(cycleTimer);
   setTimeout(startCycle, 5000); // restart after 5 seconds
}