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

Question

我正在做一个内容滑块，它自动循环幻灯片（通过定期调用“next”函数使用setInterval），但在用户单击prev/next按钮时通过使用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); 
} 

Answer 1

把你setInterval在一个函数，然后调用该函数与setTimeout()。

setInterval()和setTimeout()之间的区别是，setInterval()在每个时间间隔重复调用的函数，而setTimeout()在指定延迟后调用你的函数只有一次。

在下面的代码中我添加了一个函数startCycle()。调用该函数即可立即启动该循环，以便自动启动并根据现有函数中的超时设置启动该循环。

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 
}