如何清除间隔并重新设置?
这就是我想要完成的:当最后一张幻灯片到达fadeOut最后一张幻灯片然后fadeIn第一张幻灯片,然后clearInterval (一切都适用于这部分) 。 现在我的问题是我想再次 setInterval如果它不存在但我不知道如何实现它:(
我试图用if if来解决这个问题,但后来我的脚本根本不起作用!
那我怎么能再次重新启动我的间隔? 谢谢!!
如果没有像这样的声明它工作正常:
if(!intervalID){ intervalID = setInterval(animate,5000); }
这是我到目前为止:
$(document).ready(function() { /*check if intervalID don't exists messes UP!!*/ if (!intervalID) { intervalID = setInterval(animate, 5000); } //Hide everything except first slide and controls $('.slidewrap div:not(.slidewrap div:first,.slidewrap .slide_controls)').hide(); var animate = function() { /*if .pagination_active is last removeClass and addClass to .pagination_active first li tag*/ if ($('.pagination_active').is($('.slide_controls ul li:last'))) { $('.pagination_active').removeClass('pagination_active'); $('.slide_controls ul li:first').addClass('pagination_active'); } else { $('.pagination_active').removeClass('pagination_active').next().addClass('pagination_active'); } /*if div.active is last fadeOut and add .active class to the first div and fadeIn FIRST div then CLEAR INTERVAL and set intervalID to zero */ if ($('.active').is($('.slidewrap div:last'))) { $('.active').fadeOut(1000).removeClass('active'); $('.slidewrap div:first').addClass('active').fadeIn(1000, function() { clearInterval(intervalID); intervalID = 0; }); } //OR .active fadeOut and next div fadeIn else { $('.active').fadeOut(1000).next().fadeIn(1000, function() { $('.slidewrap div.active').removeClass('active').next('div').addClass('active'); }); } } var intervalID; intervalID = setInterval(animate, 3000); });
清除间隔后,需要使用setInterval()
再次启动它。
为setInterval()
创建函数会更好
var intervalID = null; function intervalManager(flag, animate, time) { if(flag) intervalID = setInterval(animate, time); else clearInterval(intervalID); }
这里flag
是一个值为true/ false
的boolean
变量。 true
将执行setInterval()
, false
将执行clearInterval()
;
现在您可以根据需要使用上述function。
例如:
intervalManager(true, animate, 300); // for setInterval intervalManager(false); // for clearInterval
这是实用程序对象,它采用可用于启动和停止间隔的回调和间隔。
//simple utility object to start and stop an interval var IntervalUtil = function(functionCall, interval){ var intervalObj = 0, INTERVAL = interval; var callback = functionCall; function startTimer(){ console.log('start timer', intervalObj) if(intervalObj === 0){ intervalObj = setInterval(callback, INTERVAL) } } function stopTimer(){ clearInterval(intervalObj); intervalObj = 0; console.log('timer stopped', intervalObj); } return { startTimer : startTimer, stopTimer : stopTimer } };
* 你会这样使用它*
Timer : setInterval()
在函数中包装setInterval
,例如:
const startTimer = (timer) => { let seconds = 10 timer = setInterval(() => { console.log(seconds) seconds-- if(seconds === 0) { console.log("Time's up") clearInterval(timer) } }, 1000) }
并在任何地方调用它:
startTimer()
只是示例
var myVar function myTimer() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = t; } function myStopFunction() { clearInterval(myVar); } function myStartFunction() { myVar = setInterval(myTimer, 1000); } myStartFunction();