We Keep Coding

Javascript Countdown Timer w/ Bootstrap Modal Pause

See my code below, I am trying to get the countdown timer to pause when a bs.modal is shown and to resume again once the modal is hidden. This works perfectly if the modal is opened and then closed but if you try to reopen the modal again, the timer just continues. I am probably missing something obvious but am not the best when it comes to JS.
(function countdown(remaining) {
if(remaining === 0) {
location.reload(true);
}
document.getElementById('countdown').innerHTML = remaining;
$(document).on('shown.bs.modal', function(e) {
console.log("modal triggered");
clearTimeout(timeout);
});
$(document).on('hide.bs.modal', function(e) {
console.log("modal closed");
countdown(remaining - 1);
});
timeout = setTimeout(function(){
if(remaining != 0) {
countdown(remaining - 1);
}
}, 1000);
})(300);

It seems the issue with the existing code is a timing problem that results in multiple timeouts getting set simultaneously, some of which can then never be cleared because their id's get lost. It's easy to get into such a situation when you're setting up a new timeout for every iteration. So, as I mentioned, setInterval() is a better choice here. Below is a solution using setInterval(). Also note that it's written so as to ensure that any existing interval is cleared before its id is overwritten (in the function clearAndSetInterval.)
(function (remaining) {
var interval;
var clearAndSetInterval = function () {
clearInterval(interval);
interval = setInterval(function (){
if (remaining <= 0) {
clearInterval(interval);
location.reload(true);
}
document.getElementById('countdown').innerHTML = remaining;
remaining = remaining - 1;
}, 1000);
};
$(document).on('shown.bs.modal', function(e) {
clearInterval(interval);
});
$(document).on('hide.bs.modal', function (e) {
clearAndSetInterval();
});
clearAndSetInterval();
})(300);

fade in fade out and stop on mouse hover

I m working on small animation where the link will have fadein fadeout effect with some delay but when when user moveover his mouse on link it should stop and start animate once again once mouse out.
Currently When user moveover mouse on link 2 or more link start appering and its stop at last.
https://jsfiddle.net/e1fye4uy/3/
function InOut(elem) {
elem.delay()
.fadeIn(1000)
.delay(10000)
.fadeOut(1000,
function () {
if (elem.next().length > 0) {
InOut(elem.next());
} else {
InOut(elem.siblings(':first'));
}
}).mouseover(function () {
//$(this).stop(true, false);
// $(this).clearQueue();
elem.stop($(".newsFlash").children('li'), true, false);
}).mouseout(function () {
if (elem.next().length > 0) {
elem.clearQueue();
// elem.finish();
InOut($(this));
}
});};$(function () {
$('#content li').hide();
InOut($('#content li:first'));
});

This is my solution
https://jsfiddle.net/e1fye4uy/8/
var doAniamtion = false;
var lis = $("#content li");
var time;
function start(){
time = setInterval(function(){
next();
}, 2000);
console.log("start" + time);
}
function stop(){
console.log("stop " + time)
clearInterval(time);
}
function next(){
var lisLength = $(lis).length;
for(var i=0;i<lisLength;i++)
if($(lis[i]).hasClass("current"))
{
fadOut(lis[i],function(){
fadIn(((i+1) < lisLength) ? lis[i+1] : lis[0]);
});
return;
}
}
function fadIn(obj, callback){
$(obj).addClass("current");
$(obj).animate({
opacity:1
},500,function(){
callback && callback();
});
}
function fadOut(obj, callback){
$(obj).addClass("current");
$(obj).animate({
opacity:0
},500,function(){
$(obj).removeClass("current");
callback && callback();
});
}
start();
$("#content").mouseover(function(){
stop();
});
$("#content").mouseout(function(){
start();
});
So, I decide to use animation instead of use fadeIn and fadeOut, setInterval (+info http://www.w3schools.com/jsref/met_win_setinterval.asp) and class "current" in the li HTML element to know witch li is current visible.
PS:
For change the time that li remains visible change the setInterval Time.
For make the animations more fast or slow change the time in animation inside of fadIn and fadout functions
Any doubt about the code, ask!

SetInterval 60 second countdown issue jQuery

I'm trying to countdown 60 seconds once I click the begin button and at 0 I don't want to just hide the counter, I want it to be reset. I ran into 2 problems:
When I click the begin button again it's not starting over.
The begin button is not disabled once I click it to start the countdown.
While its counting down, when I press the begin button it accelerate the countdown.
Any help is appreciated, here is the code:
function begin() {
$('#begin').prop('disabled');
myTimer = setInterval(function() {
$('#timing').html(timing);
if (timing === 0) {
alert('Too late! Try again');
clearInterval(myTimer);
$('#timing').hide();
}
timing--;
}, 1000);
}

You have several issues:
You need .prop("disabled", true) to disable the button.
You need to reset the timing variable when you restart the timer.
You need to enable the button when the timer finishes so it can be pressed again.
You need to display the initial count when you start the timer
Code:
var timing;
var myTimer;
function begin() {
timing = 60;
$('#timing').html(timing);
$('#begin').prop('disabled', true);
myTimer = setInterval(function() {
--timing;
$('#timing').html(timing);
if (timing === 0) {
alert('Too late! Try again');
clearInterval(myTimer);
$('#begin').prop('disabled', false);
}
}, 1000);
}
Working demo (with a shorter interval time so it counts down faster): http://jsfiddle.net/jfriend00/xxs7t0gd/

Start/stop function with setInterval

i've got a simple setInterval function for radio buttons to loop on load.
I would like to add a button, which could start or stop the loop. I've added click function for the function, but don't know how to stop it afterwards.
Here is what i've got so far: jsfiddle
Also, if i click the button more times in a row, loop goes berserker - any help appricieted :)
p.s. I've also checked:
start & stop / pause setInterval with javascript, jQuery and
Javascript loop-problem with setTimeout/setInterval
but i was wondering in the dark on how to use those answers as i'm javascript noob.

Make a reference to your setInterval so you can use clearInterval(yourreference).
To start / stop, you can add an extra boolean variable to toggle start and stop.
var t;
var running = false;
$("#start-stop").click(function(){
clearInterval(t);
running = !running;
if (!running)
return;
t = setInterval(function(){
$('.wrap input')
.eq( ( $('input:checked').index() + 1 ) % 3 )
.prop('checked',true);
},1000);
});
Fiddle

Try
jQuery(function () {
var timer;
$("#start-stop").click(function () {
if (timer) {
clearInterval(timer);
timer = undefined;
} else {
timer = setInterval(function () {
$('.wrap input')
.eq(($('input:checked').index() + 1) % 3)
.prop('checked', true);
}, 1000);
}
});
})
Demo: Fiddle

le solution without clearInterval
jQuery(function () {
var toggle = null;
$("#start-stop").click(function () {
if(toggle == null) {
toggle = false;
setInterval(function () {
if(toggle)
$('.wrap input').eq(($('input:checked').index() + 1) % 3).prop('checked', true);
}, 1000);
}
toggle = !toggle;
});
});
Fiddle HERE

starting and stopping a timer with jquery in hover

how would you guys reinitiate a javascript timer after it's been stopped. Basically I need the timer to stop, and then start again on rollout of a div. I have
var timer = setInterval(myFunction, 1000);
timer
function myFunction(){<br/>
if(){
do this
}
else if () {
do this
}
};
then I have
$("td").hover(
function () {
window.clearInterval()
},<br/>
function () {
timer
}
);
all works good except it doesn't start again on hover off. If I put a new timer in hover off the timer starts to speed up every time you hover on and off.... Any ideas.
Thanks

var intervalID = setInterval(myFunction, 1000);
function myFunction(){
//logic goes here
};
$("td").hover( function () {
window.clearInterval(intervalID)
},
function () {
intervalID = setInterval(myFunction, 1000);
} );
Explanation: What's happening is that the setInterval is returning the ID associated with that interval.
I did a littse jsFiddle to show it works.
NOTE: this doesn't pause the current Interval. It stops it and starts it again. So if you were in a 10sec interval at 9 secs and stopped it. When it starts again it will take another 10secs.