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.
Related
I am developing a JavaScript/WebRTC walkie-talkie app and require a button to be held down to send audio. It works fine until I click the right mouse button whilst holding the left which causes the setInterval function to continue working and clearInterval unable to stop it via its ID. It just continues on forever. According to everything I have read, clearInterval should stop it, especially if the interval is set globally.
var intervalId;
$("#transmitbutton").on("mousedown touchstart", function () {
intervalId = setInterval(function () {
console.log("PTT pressed");
}, 1000);
});
$("#transmitcontainer").on("mouseup touchend mouseleave", function () {
clearInterval(intervalId);
});
I have tried the start and stop buttons and it has the same outcome. clearInterval is not working.
var intervalId;
$("#transmitstart").on("click", function () {
intervalId = setInterval(function () {
console.log("PTT pressed");
}, 1000);
});
$("#transmitstop").on("click", function () {
clearInterval(intervalId);
});
If you happen to call your function that creates it more then one time you will have an interval that will not be cancelable since you will overwrite the interval id. So either you need to cancel it, or not make a new interval.
var intervalId;
$("#transmitbutton").on('mousedown touchstart', function() {
if (intervalId) return; // either exit out and not create a new one
// if (intervalId) clearInterval(intervalId); //or remove it here
intervalId = setInterval(function(){
console.log("PTT pressed");
}, 1000);
});
$("#transmitcontainer").on('mouseup touchend mouseleave', function() {
if (intervalId) clearInterval(intervalId);
intervalId = null;
});
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 :)
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/
I have a setinterval that moves bulldozer from the right to the left.
In the jsfiddle below, the setInterval must stop itself after 5 seconds. (used a settimeout and clearinterval for that) but it's not working. Can anyone help me?
http://jsfiddle.net/B5MKj/11/
var gameover;
gameover = setInterval(function () {
setTimeout(function () {
clearInterval(movingbulldozer);
}, 55000);
}, 10);
You had a typo in your fiddle, updated fiddle, if works just fine, but instead of 5000 ms you had 55000ms set for the timeout.
setTimeout(function () {
clearInterval(movingbulldozer);
}, 5000);
In your example, movingbulldozer is undefined. If you're trying to clear the interval, clear the interval with the right reference. In your example, this would be clearInterval(gameover);
The problem with your example is that every 10 ms you're adding a timeout to the DOM which clears the interval.
var timeout, interval, date,
i = 0;
$(document).ready(function() {
interval = setInterval(function() {
date = new Date();
i++;
$('#debug').html('Interval parsed at '+date.getTime()+', interval #'+i);
if (i >= 100) { // According to your example
$('#debug').html('Starting timeout...');
timeout = setTimeout(function() {
$('#debug').html('Timed out');
}, 5000);
clearInterval(interval);
}
}, 10);
});
Check out my example, see if it helps. :)
http://jsfiddle.net/faqq5/
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.