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);

On mouse over enable button after 3 seconds, on mouse off disable and stop count down

I have a button that does something irreversible and I'm trying to put a lockout on it unless the user hovers over it for 3 seconds. If they wait 3 seconds the button becomes enabled. As soon as they mouse off it disables again. If they also mouse off during the count down of 3 seconds it stops the count down.
$('#delete_btn').on('mouseover', function () {
setTimeout(function () {
$('#delete_btn').prop('disabled', false)
}, 3000)
})
$('#delete_btn').on('mouseout', function () {
$('#delete_btn').prop('disabled', true)
})
I'm not sure how to stop the count down if they mouse out early

You need to clear the timeout. So, it's ready to fire on the next call:
var timeout;
$('#delete_btn').on('mouseover', function() {
timeout = setTimeout(function() {
$('#delete_btn').prop('disabled', false);
}, 3000);
});
$('#delete_btn').on('mouseout', function() {
clearTimeout(timeout);
$('#delete_btn').prop('disabled', true);
});
See it in work at CodePen:
https://codepen.io/aminshahrokhi/pen/VNJBYZ

this a copy-paste from W3School, basiclly you have to 'save' the timeout into a var, an then, on hover, clear the time out:
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
I hope this helps :)

Delaying a timed interval function?

I have a function set up like so:
setInterval(function () { get_fb(); }, 10000);
I'd like to reset the timer to 10 seconds whenever a user does something (like hover over an element or click an element)
How would I tell the program to do something like this?

Is you assign the timer to a variable you can clear it and restart it like this:
var timer = setInterval(get_fb, 10000);
$('#foo').click(function() {
clearInterval(timer); // stop timer
// do something...
timer = setInterval(get_fb, 10000); // restart timer
});

var timeout = setInterval(function () { get_fb(); }, 10000);
//to reset interval, first clear it
clearInterval(timeout);
//then re-create
timeout = setInterval(function () { get_fb(); }, 10000);

In the event callback, clear the interval, and then set the interval anew:
interval = setInterval(...);
...elsewhere...
$(..selector..).click(function () {
clearInterval(interval);
interval = setInterval(...);
});
Be sure that interval is accessible within the scope of the click callback.

How to fire an event after n seconds of maintained click? - jQuery/Javascript

I am sure I am not the first looking for this, but I did not find any solution to my problem..
I am looking for a way to fire an event after and only after a 3 seconds maintained click.
I tried with javascript setInterval() function with mouseup/mousedown Jquery events but it did't work.
Someone has an idea ?
I have a div, I keep the mouse button down for 3 seconds, and something will be fired.
3 seconds timer must be reinitialized every time.

Call setTimeout() to perform your action after 3000 milliseconds, storing the identifier from setTimeout() into a variable scoped above the function. On the element's mouseup(), clear the timeout if it exists via clearTimeout().
var divMouseDown;
$('#div-id').mousedown(function() {
divMouseDown = setTimeout(function() {
// Do timeout action...
}, 3000);
});
$('#div-id').mouseup(function() {
if (divMouseDown) {
clearTimeout(divMouseDown);
}
});

On mouse down, set a timeout for 3 seconds in the future.
On mouse up, clear the timeout.

$('#div').on('mousedown', function(){
mousetimer.down();
}).on('mouseup', function(){
mousetimer.cancel();
});
var mousetimer = {
timer: null,
timing: false,
down: function(){
if(!timing)
{
mousetimer.timing = true;
mousetimer.timer = setTimeout(function(){
mousetimer.trigger();
}, 3000);
}
},
trigger: function(){
alert('do something');
mousetimer.cancel();
},
cancel: function(){
mousetimer.timing = false;
clearTimeout(mousetimer.timer);
}
};

Seems like mouseup/mousedown events and setTimeout/clearTimeout is the way to do it:
var timer = null;
$(selector).on('mousedown', function(ev) {
timer = setTimeout(function() {
timer = null;
/* Do something */
}, 3000);
}.on('mouseup', function(ev) {
if (timer) {
clearTimeout(timer);
timer = null;
}
});

Use a timeout of 3000ms.
Set the timeout on the mouse down event, clear it on the mouse up event.
http://jsfiddle.net/kHMWX/

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.