js定义了一个周期函数setInterval,怎么样能暂停五分钟后,再重启这个周期函数
最近在做一个小功能,五张图片在一个椭圆轨道上做轨迹运动,当图片运动到最低点时,下面的内容切换到对应的内容,并且暂停五分钟
现在就是想怎么样当图片运动到最低点时,暂停五分钟,五分钟后再重启这个setInterval方法?
代码放在codpen上了 完整的代码
我想到的是暂停周期函数的时候,记下时间oldDate,然后另外设置一个定时器,存储时间
newDate,当两者差为五分钟时,重启周期函数,发现并没有达到预期效果。
请问你们有没有什么解决办法,能暂停五分钟后,再重启这个定时器?
//运动函数
var fun_animat = function(){
//do something
//如果图片的top值是最大值切换下面的内容
if(parseInt(wpers) === 1) {
$(".content-box .content").each(function(index1) {
$(this).css('display','none')
$(".content-box .content").eq(index).css('display','block')
});
}
//最低点时暂停轨迹运动
if(wpers === 1.05) {
clearInterval(setAnimate);
oldDate = new Date().getTime();
console.log(oldDate);
}
};
//定时调用运动函数
var setAnimate = setInterval(fun_animat,200);
//通过设置newDate oldDate,当他们的时间差是五分钟,重启setInterval函数(发现没有达到预期效果)
function fun_date() {
newDate = new Date().getTime();
console.log('newDate:'+ newDate);
if(newDate - oldDate === 30000) {
setAnimate = setInterval(fun_animat,200);
}
}
var setReset = setInterval(fun_date,200);
效果如下
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
创建个周期为1秒的时钟,设置个全局变量times用来记住已经过去时间,每周期判断times%5*60==0则触发,否则不做处理。
嗯。思路差不多这样。
你就这样嘛,你只用一个定时器来控制所有,定时器走动时间设为1000ms,代码全部写在这个定时器里面。你设个全局变量当做开关,比如 var switch = 1;,此外设个时间变量var time=0。把控制运动的所有代码全部放到这个 if(switch===1){}判断里面,然后在if判断里面设个变量走动时间,不断地time+=1,如楼上所言,当你的时间time%(5*60)==0的时候就改变开关的值switch=0,else的时候就是 switch=1。基本思路就是这样来回的变化开关。