My Jquery:
function myTimer() {
var sec = 15
var timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
} , 1000);
}
$("#knap").click(function() {
myTimer();
});
$("#reset").click(function() {
// set timer to 15 sec again..
});
I want the timer to be reset when clicked on #reset.
You need to leave your "timer" variable in a scope that is available the next time you call the myTimer function so you can clear the existing interval and reset it with a new interval. Try:
var timer;
functionn myTimer() {
var sec = 15
clearInterval(timer);
timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
} , 1000);
}
$("#knap").click(function() {
myTimer();
});
$("#reset").click(function() {
myTimer();
});
or you could do something along these lines:
var myTimer = function(){
var that = this,
time = 15,
timer;
that.set = function() {
console.log('setting up timer');
timer = setInterval(function(){
console.log('running time: ' + time);
},1000);
}
that.reset = function(){
console.log('clearing timer');
clearInterval(timer);
}
return that;
}();
and run when you need to:
myTimer.set();
myTimer.reset();
Clear the timer every time it's initalized, that way all you have to do is call the function again to reset the timer :
var timer;
function myTimer(sec) {
if (timer) clearInterval(timer);
timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
}, 1000);
}
$("#knap, #reset").click(function() {
myTimer(15);
});
FIDDLE
You could re-write your myTimer() function like so:
function myTimer() {
var sec, timer = null;
myTimer = function() {
sec = 15;
clearInterval( timer );
timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
} , 1000);
};
myTimer();
}
Now, whenever you call myTimer(), the setInterval gets reset.
Here's an approach that is more in tune with the way JS was designed (as a functional language for those who still don't know). Rather than relying on a global variable, use a closure:
$("#knap").click(function start()//named callback to bind && unbind:
{
$(this).unbind('click');//no need to start when started
$("#reset").unbind('click').click((function(timer)
{//timer is in scope thanks to closure
return function()
{//resets timer
clearInterval(timer);
timer = null;
$('#knap').click(start);//bind the start again
//alternatively, you could change the start button to a reset button on click and vice versa
}
})(setInterval((function(sec)
{
return function()
{
$('#timer').text(sec--);
if (sec === -1)
{
$('#reset').click();//stops interval
$('#reset').unbind('click');//no more need for the event
alert('done');
}//here's the interval counter: 15, passed as argument to closure
})(15),1000)));//set interval returns timer id, passed as argument to closure
});
Now I will admit this is rather messy (and untested) but this way there reset event is only available when it's necessary, and you're not using any globals. But crucially, this is where JS's power lies: functions as 1st class objects, passing them as arguments and return values... just go function-crazy :)
I've set up a working Fiddle, too
You could also use a jQuery timer plugin, then you don't need to pass around the Variable.
Plugin: http://archive.plugins.jquery.com/project/timers
Example for the plugin: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/
Related
well my problem is hopefully easy: 3 actions that shall happen while hovering a photo. The timer at the bottom works now, the other things crashed. A Page shall open in 5 seconds and the photo shall move out of the display before. Sounds easy, doesnt it? I hope so.
Do you guys know what I can do?
Thanks already and best regards!
<script>
var interval;
var timer = 5;
$('.HoverBalken').on({'mouseover': function () {
timer = setTimeout(function () {
$('.HoverBalken').toggleClass('HoverBalken-active');
$('.N').toggleClass('N-active');
$('.K').toggleClass('K-active');
}, );
timer = setTimeout(function () {
window.location = "FoliagePlates.html"
}, 5000);
}, 'mouseover': function () {
interval = setInterval(function() {
timer--;
$('.timer').text(timer);
if (timer === 0) clearInterval(interval);
}, 1000);
}, 'mouseout' : function () {
clearTimeout(timer);
$('.HoverBalken').removeClass('HoverBalken-active');
$('.N').removeClass('N-active');
$('.K').removeClass('K-active');
clearInterval(interval);
timer = 5;
$('.timer').text(timer);
}
});
</script>
<script>
var interval;
var timer = 5;
var timeout1,timeout2;
$('.HoverBalken')
.mouseover(function() {
//use different variable than your timer
timeout1 = setTimeout(function () {
$('.HoverBalken').toggleClass('HoverBalken-active');
$('.N').toggleClass('N-active');
$('.K').toggleClass('K-active');
}, 2000); //forgot time here
//use different variable than your timer and first timeout
timeout2 = setTimeout(function () {
window.location = "FoliagePlates.html"
}, 5000);
//stay in same scope, don't define event again
interval = setInterval(function() {
timer--;
$('.timer').text(timer);
if (timer === 0) clearInterval(interval);
}, 1000);
})
.mouseout(function() {
//clear both timers
clearTimeout(timeout1);
clearTimeout(timeout2);
$('.HoverBalken').removeClass('HoverBalken-active');
$('.N').removeClass('N-active');
$('.K').removeClass('K-active');
clearInterval(interval);
timer = 5;
$('.timer').text(timer);
});
</script>
this should fix it, notice the comments in code
I'm running a node server with raspberry pi gpio modules installed. I'm trying to get my ESC to start and run for 0.5 seconds, then I need it to stop for .5 second, then start again in a loop. however if "start" = 0 (Button off) I need the loop to stop completely and set the servo pulse width to 1000 (Motor Stop)
Here is my code, It kinda works. But doesn't stop
var start = new blynk.VirtualPin(4);
start.on('write', function t(start) {
if (start == 1) {
setInterval(function() {
setInterval(function() {
motor.servoWrite(1920);
}, 500);
setInterval(function() {
motor.servoWrite(1000);
}, 1000);
}, 500);
} else {
motor.servoWrite(1000);
}
motor.servoWrite(1000);
});
Could someone show me where I've gone wrong?
Store your interval in a variable
var myInterval = setInterval(function() { [... your code code] },delay);
then to stop it by
clearInterval(myInterval);
var start = new blynk.VirtualPin(4);
motor.servoWrite(1000);
var interval, timeout;
start.on('write', function t(start) {
if (start == 1) {
clearInterval(interval);
clearTimeout(timeout);
interval = setInterval(function() {
motor.servoWrite(1920);
timeout = setTimeout(function() {
motor.servoWrite(1000);
}, 500);
}, 1000);
} else {
clearInterval(interval);
clearTimeout(timeout);
motor.servoWrite(1000);
}
});
I think setInterval might be the wrong thing to use. The setInterval is reoccurring. Where you really just want to run something once, wait, then run something else. Try doing it with setTimeout, it waits for x ms then executes something.
var id = null;
start.on('write', function t(start) {
if(start == 1){
pulse();
}
else {
clearTimeout(id);
motor.servoWrite(1000);
}
});
function pulse() {
servoOn();
id = setTimeout(function(){
servoOff();
id = setTimeout(function(){
pulse();
}, 1000);
}, 500);
}
function servoOn(){
motor.servoWrite(1920);
}
function servoOff(){
motor.servoWrite(1000);
}
function myFunction(interval) {
var intervalID = window.setInterval(function () {
getdetails();
$('.View').load('alert.php').fadeIn("slow");
}, 3000);
if (interval == 1) {
window.clearInterval(intervalID);
}
}
when I call myFunction with argument 1 then clearInterval() not clear the setInterval().I want setInterval() stop its excution when I call myFunction with argument 1.
The problem is that you are creating a new timer everytime you call the function. Modify it like:
var intervalID = 0;
function myFunction(interval){
if(interval == 1) {
if(intervalID != 0) {
window.clearInterval(intervalID);
intervalID = 0;
}
}
else if(intervalID == 0) { // create only if not existing
intervalID = window.setInterval(function () {
...
});
}
}
Now, the firts time you call it, it will create the timer. Afterwards when you call it with 1 as the argument, it will clear the timer.
I am trying to repeat setTimeout every 10 seconds. I know that setTimeout by default only waits and then performs an action one time. How can I repeat the process?
setTimeout(function() {
setTimeout(function() {
console.log("10 seconds");
}, 10000);
}, 10000);
Maybe you should use setInterval()
setInterval() is probably what you're looking for, but if you want to do get the same effect with setTimeout():
function doSomething() {
console.log("10 seconds");
setTimeout(doSomething, 10000);
}
setTimeout(doSomething, 10000);
Or if you don't want to declare a separate function and want to stick with a function expression you need to make it a named function expression:
setTimeout(function doSomething() {
console.log("10 seconds");
setTimeout(doSomething, 10000);
}, 10000);
(Or use arguments.callee if you don't mind using deprecated language features.)
according to me setInterval() is the best way in your case.
here is some code :
setInterval(function() {
//your code
}, 10000);
// you can change your delay by changing this value "10000".
Unlike the answers provided by #nnnnnn and #uzyn I discourage you from making use of setInterval for reasons elaborated in the following answer. Instead make use of the following Delta Timing script:
function DeltaTimer(render, interval) {
var timeout;
var lastTime;
this.start = start;
this.stop = stop;
function start() {
timeout = setTimeout(loop, 0);
lastTime = + new Date;
return lastTime;
}
function stop() {
clearTimeout(timeout);
return lastTime;
}
function loop() {
var thisTime = + new Date;
var deltaTime = thisTime - lastTime;
var delay = Math.max(interval - deltaTime, 0);
timeout = setTimeout(loop, delay);
lastTime = thisTime + delay;
render(thisTime);
}
}
The above script runs the given render function as close as possible to the specified interval, and to answer your question it makes use of setTimeout to repeat a process. In your case you may do something as follows:
var timer = new DeltaTimer(function (time) {
console.log("10 seconds");
}, 10000);
var start = timer.start();
const myFunction = () => {
setTimeout(() => {
document.getElementById('demo').innerHTML = Date();
myFunction();
}, 10000);
}
Easiest, but not efficient way!
Here is a function using setTimeout that tried to call itself as close as it can to a regular interval. If you watch the output, you can see the time drifting and being reset.
<script type="text/javascript">
function Timer(fn, interval) {
this.fn = fn;
this.interval = interval;
}
Timer.prototype.run = function() {
var timer = this;
var timeDiff = this.interval;
var now = new Date(); // Date.now is not supported by IE 8
var newInterval;
// Only run if all is good
if (typeof timer.interval != 'undefined' && timer.fn) {
// Don't do this on the first run
if (timer.lastTime) {
timeDiff = now - timer.lastTime;
}
timer.lastTime = now;
// Adjust the interval
newInterval = 2 * timer.interval - timeDiff;
// Do it
timer.fn();
// Call function again, setting its this correctly
timer.timeout = setTimeout(function(){timer.run()}, newInterval);
}
}
var t = new Timer(function() {
var d = new Date();
document.getElementById('msg').innerHTML = d + ' : ' + d.getMilliseconds();
}, 1000);
window.onload = function() {
t.run();
};
</script>
<span id="msg"></span>
Using jQuery, this is what you could do:
function updatePage() {
var interval = setTimeout(updatePage, 10000); // 10' Seconds
$('a[href]').click(function() {
$(this).data('clicked', true);
clearInterval(interval); // Clears Upon Clicking any href Link
console.log('Interval Cleared!');
});
// REPLACE 'YOUR_FUNCTION_NAME' function you would like to execute
setTimeout(YOUR_FUNCTION_NAME, 500);
} // Function updatePage close syntax
updatePage(); // call the function again.
I am using setInterval in a loop. Once the condition has been met (aa=bb) and interval cleared, is it possible to reset interval?
var interval = setInterval(function()
{
if( aa == bb)
{
clearInterval(interval);
}
} , 10000);
If you make the code a function like this, you can call it anytime to start it over.
function startInterval() {
var interval = setInterval(function() {
if( aa == bb) {
clearInterval(interval);
}
}, 10000);
}
startInterval();