how to restart setinterval - javascript

Line_Baslat();
setInterval(function(){ moveLeft(); Line_Baslat(); },4000);
function Line_Tekrar () {
$("#dv_line").animate({width:"0%"},0);
};
function Line_Baslat () {
$("#dv_line").animate({width:"100%"},4000);
};
function refseh () {
setInterval(update,4000);
};
$("#prev").click(function(){
moveLeft();
refresh();
});
$("#next").click(function(){
moveRight();
refresh();
});

setInterval function returns ID of that interval, which you can use to cancel it. For example in your case
Line_Baslat();
var timeout;
function refresh () {
if (timeout) {
clearInterval(timeout);
}
timeout = setInterval(function(){ moveLeft(); Line_Baslat(); },4000);
};
function Line_Tekrar () {
$("#dv_line").animate({width:"0%"},0);
};
function Line_Baslat () {
$("#dv_line").animate({width:"100%"},4000);
};
$("#prev").click(function(){
moveLeft();
refresh();
});
$("#next").click(function(){
moveRight();
refresh();
});

Try storing your setInterval body in another function, like this:
//doStuff variables.
var a = 0;
function doStuff(){
//interval body
}
var interval;
interval = setInterval(function(){
doStuff(); //Call Interval Body
},timeout);
clearInterval(interval); //clear interval
//reset interval to call body function
interval = setInterval(function(){
doStuff(); //Call Interval Body
},timeout);
This allows you to restart/reset the interval.

Related

fullpagejs pause on hover

js and I want to pause the slider when mouse hover the h1 tag but it doesn't, I know that it's a problem with javascript but I'm not able to make it works
http://jsfiddle.net/2dhkR/405/
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function() {
setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 3000);
}
});
// the function - set var up just in case
// the timer isn't running yet
var timer = null;
function startSetInterval() {
timer = setInterval(showDiv, 5000);
}
// start function on page load
startSetInterval();
// hover behaviour
function showDiv() {
$('#fullpage h1').hover(function() {
clearInterval(timer);
}, function() {
startSetInterval();
});
}
});
Any help would be appreciated, Thanks
http://jsfiddle.net/2dhkR/407/
var interval = undefined;
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function() {
interval = setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 100);
}
});
$('#fullpage h1').mouseover(function() {
clearInterval(interval);
interval = null;
})
$('#fullpage h1').mouseout(function() {
interval = setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 100);
});
}); // end document ready
Very simple way (maybe not the clearest) with a bool:
var go = true;
if (go)$.fn.fullpage.moveSlideRight();
$('#fullpage h1').hover(function() {
go = false;
clearInterval(timer);
}, function() {
go = true;
startSetInterval();
});
Try to use jQuery's hover() on mouseenter, then start the slider again on mouseleave.
$(function() {
var interval = setInterval( slideSwitch, 10000 );
$('#slideshow').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval( slideSwitch, 10000 );
});
});

Clear set interval

setInterval(function hello() {
console.log('hello world');
return hello;
}(), 6000);
how I can clear the interval, I tried add var interval
var i =0;
var interval = setInterval(function hello() {
console.log('world');
if(++i == 3) clearInterval(interval);
return hello;
}(), 5000);
But it didn't worked. thanks for your help.
clearInterval() certainly works. You have error in the following line of code:
}(), 5000);
//^^ remove () as this is not IIFE
var i =0;
var interval = setInterval(function hello() {
console.log('world');
if(++i == 3) clearInterval(interval);
return hello;
}(), 5000); // notice those parenthesis
you are supposed to pass a handler to setInterval() not invoke it in place ,

How do I stop text scrolling using jQuery

This is my code:
$(document).ready(function() {
function ticker() {
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
});
}
setInterval(function(){ ticker(); }, 3000);
});
I don't know how to stop the text scrolling when I place the mouse over a particular title.SEE HERE MY CODE
Please Try This one:
$(document).ready(function () {
function ticker() {
$('#ticker li:first').slideUp(function () {
$(this).appendTo($('#ticker')).slideDown();
});
}
var clr = null;
function animate(){
clr=setInterval(function () {
ticker();
}, 3000);
}
animate();
$('#ticker li').hover(function () {
// clear interval when mouse enters
clearInterval(clr);
},function(){
// again start animation when mouse leaves
animate();
});
});
DEMO
You can add the a new variable that will save the value for mouse entered
see your updated code
$(document).ready(function() {
var entered = false;
$('#ticker').mouseover(function(){
entered = true;
})
$('#ticker').mouseout(function(){
entered = false;
})
function ticker() {
if(!entered){
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
});
}
}
setInterval(function(){ ticker(); }, 3000);
});
$(document).ready(function() {
var j= setInterval(function(){ ticker(); }, 3000);
var i=1;
function ticker() {
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
i++;
if(i==4){
alert("ok");
clearInterval(j) ;
}
});
}
});
you can set the limit of i and stop the script by using clearInterval() function.

Stop countdown javascript

i'm new in js and i have created simple countdown but i want to stop it if the value of count = 0
this my script
var no;
no = 5;
$(document).ready(
function(){
timer();
var t = setInterval(timer, 1000);
var c = setInterval(cek, 1000);
}
);
function timer(){
no--;
$('.timer').html(no);
}
function cek(){
if(no===0){
alert('done');
clearInterval(t);
clearInterval(c);
}
}
Thi is the link of my script : here
You can try doing this (there is no need to create 2 async timers when you can achieve the same with only one such interval):
var t;
var no = 5;
$(document).ready(function() {
t = setInterval(function() {
timer();
cek();
}, 1000);
});
function timer() {
no--;
console.log('NO');
$('.timer').html(no);
}
function cek() {
if(no===0) {
alert('done');
clearInterval(t);
}
}
You can check an updated version of your fiddle # http://jsfiddle.net/bG8yr/5/
Simple issue, your variable was defined in the ready/anonymous function closure. I want to second the fact this is no the best way to do it. In the future inspect the fiddle and look for console errors. Its an easy way to figure out whats going wrong.
http://jsfiddle.net/cYWBL/
var no, t, c, no = 5;
$(document).ready(
function(){
timer();
t = setInterval(timer, 1000);
c = setInterval(cek, 1000);
}
);
function timer(){
no--;
$('.timer').html(no);
}
function cek(){
if(no===0){
alert('done');
clearInterval(t);
clearInterval(c);
}
}
This will do exactly what you want:
var no,
t;
no = 5;
$(document).ready(
function () {
t = setInterval(timer, 1000);
}
);
function timer() {
no--;
$('.timer').html(no);
if (no === 0) {
alert('done');
clearInterval(t);
}
}
here is the javascript code which you required. just include one if-else which is very simple. all code is your. just add if timer goes less than 0 than do nothing else coutdown.
var no;
no = 5;
$(document).ready(
function(){
timer();
var t = setInterval(timer, 1000);
var c = setInterval(cek, 1000);
}
);
function timer(){
no--;
if(no<0){ //nothing }
else{
$('.timer').html(no);
}
}
function cek(){
if(no===0){
alert('done');
clearInterval(t);
clearInterval(c);
}
}
Here is the answer
http://jsfiddle.net/bG8yr/4/
var no;
no = 5;
var isRunning=false;
$(document).ready(
function(){ isRunning=true;
timer();
var t = setInterval(timer, 1000);
var c = setInterval(cek, 1000);
}
);
function timer(){
if(isRunning){
no--;
$('.timer').html(no+":"+isRunning);
}
}
function cek(){
if(no===0&&isRunning){
isRunning=false;
alert('done');
clearInterval(t);
clearInterval(c);
}
}
Try this :
function timer(){
no--;
if (no >= 0)
$('.timer').html(no);
}

Session timeout if the user is idle for certain time

Hi I am logging out the user if the user is idle for 1 minute and I am trying to extend the session time out onkeypress,onmousemove,onmosueout etc. session time out is happening but the extending the session time out on above events is not happening.Please help me in this regard.
My code :
var InactivityTime = function () {
var t;
window.onload = resetTimer();
document.onmousemove = resetTimer();
document.onkeypress = resetTimer();
document.onmousedown = resetTimer();
document.onmouseclick= resetTimer();
document.onmouseup=resetTimer();
function logout() {
alert("Your session has been expired.Please Re-Login to continue");
}
function resetTimer() {
clearTimeout(t);
t = setTimeout(logout, 60000);
// 1000 milisec = 1 sec
}
return {
//main function to initiate the module
init: function () {
resetTimer();
}
};
}();
You will need to register the event listeners in the init function as below:
return {
//main function to initiate the module
init: function () {
resetTimer();
window.onload = resetTimer();
document.onmousemove = resetTimer();
document.onkeypress = resetTimer();
document.onmousedown = resetTimer();
document.onmouseclick= resetTimer();
document.onmouseup=resetTimer();
}
};
Also those event listeners seem to be redundant. I would reduce them down to keypress and mousemove only.
And a good way to debug is to add a console.log() statement in the resetTimer() function:
function resetTimer() {
clearTimeout(t);
t = setTimeout(logout, 60000);
console.log("reset");
// 1000 milisec = 1 sec
}
function InactivityTimer(path, delay) {
// private instance var
var timeout;
// private functions
function logout() {
alert("you've been logged out");
window.location.href = path || "/";
}
function reset() {
stop();
start();
}
function start() {
if (!timeout) {
timeout = setTimeout(logout, delay || 60000);
}
}
function stop() {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
}
// export public api
this.start = start;
this.stop = stop;
this.reset = reset;
// init
document.addEventListener("mousemove", reset);
document.addEventListener("keypress", reset);
}
Now you can use it like this
var timer = new InactivityTimer("/logout", 60000);
// maybe some other event stops the timer?
timer.stop();
// something else starts it back up
timer.start();

Categories