clearTimeout not working when called in if statement - javascript

This code should run for 10 seconds before ending, however if you are running the function again before the 10 seconds are finished, it should clear theTimeout and start the 10 seconds over again
function start() {
let counter = 0;
let timeUp = true;
let hello;
setInterval(()=> {
counter++
console.log(counter)
},1000);
if (timeUp == false) {
clearTimeout(hello)
timeUp = true
console.log('should run again with new clock')
start()
} else {
console.log('new clock started')
timeUp = false;
hello = setTimeout(() => {
timeUp = true
console.log('end clock')
}, 10000);
};
};


When you call start() again, this new function has no reference to hello or timeUp
Try it like this:
let hello
let timeUp = true
function start() {
let counter = 0;
//let timeUp = true;
//let hello;
setInterval(()=> {
counter++
console.log(counter)
},1000);
if (timeUp == false) {
clearTimeout(hello)
timeUp = true
console.log('should run again with new clock')
start()
} else {
console.log('new clock started')
timeUp = false;
hello = setTimeout(() => {
timeUp = true
console.log('end clock')
}, 10000);
};
};
window.start = start


Inside your function start, timeUp is always set to true, and thus clearTimeout will never be called. The way you're doing things, you should make timeUp a global variable so the function has "memory" of if the time has been reached or not.
But why do you need to set two intervals? You're already keeping track of the number of seconds that have passed, so we can make use of that interval to determine when 10 seconds have passed. This simplifies things quite a bit, and allows us to get rid of the timeUp variable as well:
let interval;
function start() {
let counter = 0;
clearInterval(interval); // clear the previous interval
interval = setInterval(() => { // set a new interval
counter++;
if (counter == 10) {
console.log('end of clock');
clearInterval(interval);
}
console.log(counter);
}, 1000);
}
This achieves exactly what you want. Whenever start is called, it cancels the previous interval and creates a new one. Once 10 seconds have passed, it clears the interval.


Your approach is kind of misleading. I think a better approach would be to have a Timer Object that you can start:
function Timer() {
var self = {
// Declare a function to start it for a certain duration
start: function(duration){
self.counter = 0;
self.duration = duration;
clearTimeout(self.timeout); // Reset previous timeout if there is one
console.log("New counter starting.");
self.count();
},
// A function to count 1 by 1
count: function(){
console.log(self.counter);
self.counter++;
if(self.counter > self.duration){
console.log('Time is up.');
} else {
self.timeout = setTimeout(self.count, 1000); // not over yet
}
}
// and other functions like stop, pause, etc if needed
};
return self;
}
// Declare your Timer
var myTimer = new Timer();
// Start it on click
document.getElementById('start-btn').addEventListener('click', function(){
myTimer.start(10);
}, true);
<button id="start-btn">Start the timer</button>

Related

function not working when i click button?

when i click my button, a timer is supposed to display a countdown timer. But the button does not work.
let timerCounter = document.getElementById("timer-counter");
let timer;
let timerCount;
function startTimer() {
timer = setInterval(function() {
timerCount--;
timerElement.textContent = "Time; " + timerCount;
if (timerCount === 0) {
clearInterval(timer);
}
});
}
startButton.addEventListener("click", startTimer);

This is what I found so far:
You are decrementing the timerCount, need to specify the initial value for it to work.
You're using timerElement instead of timerCounter that you've declared.
You must pass the second args to the setInterval which is delay.
const timerCounter = document.getElementById('timer-counter');
const startButton = document.getElementById('start-button');
let timer;
let timerCount = 30;
startButton.addEventListener('click', startTimer);
function startTimer() {
timer = setInterval(function () {
timerCount--;
timerCounter.textContent = 'Time; ' + timerCount;
if (timerCount === 0) {
clearInterval(timer);
}
}, 1000);
}
<div id="timer-counter"></div>
<button id="start-button">Start</button>

Here's a slightly different approach that avoids some of the problems with global variables. The function the listener calls initialises the count, and then returns a new function (a closure) that is called when the button is clicked. It also uses setTimeout which I find more easy to understand.
// Cache your elements
const counter = document.querySelector('#counter');
const startButton = document.querySelector('button');
// Initialise your count variable
function startTimer(count = 30) {
// Return a function that is called from
// the listener
return function loop () {
// Disabled the button once it's been clicked
if(!startButton.disabled) startButton.disabled = true;
counter.textContent = `Time: ${count}`;
if (count > 0) {
setTimeout(loop, 500, --count);
}
}
loop();
}
// Call startTimer to initialise the count, and return
// a new function that is used as the listener
startButton.addEventListener('click', startTimer(), false);
<div id="counter"></div>
<button>Start</button>

I'm sure this could be improved.
In this example we don't go below 0.
We don't allow timeout collisions ( timeouts don't stack causing weird counting speeds ).
We can reset to the original number when on 0.
const c = document.getElementById('timer-counter')
const b = document.getElementById('start-button')
let timer = false
let timerCount = 30
b.addEventListener('click', start)
function decrement() {
if(timerCount < 0) {
timerCount = 30
timer = false
return
}
c.innerText = `Count: ${timerCount}`
timerCount--
timer = setTimeout(decrement, 200)
}
function start() {
if(timer) return
decrement()
}
<div id="timer-counter"></div>
<button id="start-button">Start</button>

Javascript Countdown Timer goes too fast even with boolean switch

I have the following countdown function in javascript:
countdownTimer() {
// exit method if it is active
if(this.isCountdownActive == true){
return;
}
// first time set true
this.isCountdownActive = true
this.countdown = 10
// Define the work to be done
var doWork = () => {
if(this.countdown <= 0) {
ticker.stop();
this.countdown = 10
this.isCountdownActive = false
if (this.thisUser.captain) {
Store.submitTurnEnd();
}
}
this.countdown -= 1;
};
// Define what to do if something goes wrong
var doError = function() {
console.warn('The drift exceeded the interval.');
};
// (The third argument is optional)
var ticker = new Util.AdjustingInterval(doWork, 1000, doError);
ticker.start()
},
Here is the adjusting interval function
function AdjustingInterval(workFunc, interval, errorFunc) {
var that = this;
var expected, timeout;
this.interval = interval;
this.start = function() {
expected = Date.now() + this.interval;
timeout = setTimeout(step, this.interval);
}
this.stop = function() {
clearTimeout(timeout);
}
function step() {
var drift = Date.now() - expected;
if (drift > that.interval) {
// You could have some default stuff here too...
if (errorFunc) errorFunc();
}
workFunc();
expected += that.interval;
timeout = setTimeout(step, Math.max(0, that.interval-drift));
}
}
I believe this should work, however the timer still runs too fast occasionally and doesn't reset correctly. I would say 75% of the time it works fine, but after I click it gets "jumpy" and goes too fast. Also, the timer doesn't stop correctly. So that it cycles continuously.
Thanks for the help.

Just adjust the ms to however precise you want
const span = document.getElementById("t");
let d = new Date();
d.setHours(d.getHours()+1); // demo time
let tId = setInterval(() => span.innerText = new Date(d.getTime()-new Date().getTime()).toLocaleTimeString(),100)
<span id="t"></span>

How to kill and restart the recursive function in javascript

I am working on knockout js.
In that i have a recursive function which executes a function every minute. for that am using a timer every 60 sec it will execute also same will be reflecting in the UI also.
In my case, if i try to assign or initialize a timer value(observable) which is inside a loop, it doesn't reflecting instead of reflecting it is added to the pipeline and that much time loop is running simultaneously.
In that case i want to kill the loop and again want to restart every time i am changing the timer value.
timerInSec=60;
var loop = function () {
if (this.timer() < 1) {
myFunction()
this.timer(this.timerInSec - 1);
setTimeout(loop, 1000);
} else {
this.timer(this.timer() - 1);
setTimeout(loop, 1000);
}
};
loop();

Here is my solution. Please check.
timerInSec = 60;
const Loop = (function () {
let timer = 0;
let timerId = -1;
const myFunction = function () {
console.log('finished');
}
const fnLog = function (tm) {
console.log('current time = ', tm);
}
const fnProc = function () {
timerId = setTimeout(myFunction, 1000 * timer);
}
return {
start: function (tm = 60) {
this.stop();
timer = tm;
fnProc();
},
stop: function () {
if (timerId !== -1) {
clearTimeout(timerId);
timerId = -1;
}
}
}
})();
Loop.start(timerInSec);
setTimeout(() => {
Loop.start(timerInSec);
}, 500);

clearInterval does not work

I'm trying to create a simple countdown timer. It counts down from the number entered.
However, I'm trying to clear the interval when the counter gets to 0. At the moment it seems to acknowledge the if statement, but not clearInterval().
http://jsfiddle.net/tmyie/cf3Hd/
$('.click').click(function () {
$('input').empty();
var rawAmount = $('input').val();
var cleanAmount = parseInt(rawAmount) + 1;
var timer = function () {
cleanAmount--;
if (cleanAmount == 0) {
clearInterval(timer);
}
$('p').text(cleanAmount);
};
setInterval(timer, 500);
})

You're not saving the return value of the call to setInterval, which is the value that needs to be passed to clearInterval. Passing the timer handler does no good.
var timer, timerHandler = function () {
cleanAmount--;
if (cleanAmount == 0) {
clearInterval(timer);
}
$('p').text(cleanAmount);
};
timer = setInterval(timerHandler, 500);

setInterval(function(),time) change time on runtime

I want to change setInterval function time when my code is running.
I try this
<script type="text/javascript">
$(function () {
var timer;
function come() { alert("here"); }
timer = setInterval(come, 0);
clearInterval(timer);
timer = setInterval(come, 10000);
});
</script>
First SetInterval does not work!

You're clearing the interval on the next line, so the first one wont work, as it gets cleared right away :
timer = setInterval(come, 0);
clearInterval(timer);
timer = setInterval(come, 10000);
Also, as gdoron says, setting a interval of nothing isn't really valid, and not a really good idea either, use setTimeout instead, or just run the function outright if no delay is needed.
come();
clearInterval(timer);
timer = setInterval(come, 10000);

You can't. You will need to use setTimeout, and call it repetitively:
var timer; // current timeout id to clear
function come(){ /* do something */};
var time; // dynamic interval
(function repeat() {
come();
timer = setTimeout(repeat, time);
})();
With this you can set a different "interval" to be applied each time the function repeat is executed. Yet, nothing changes if alter time during a timeout, you'd need to stop the timeout for that.

I know this is an old post, but I have implemented a typescript version for changing the interval in run time:
class LoopTimer {
private timer: null | NodeJS.Timer;
private callback: (...args: any[]) => void;
private ms: number;
private started: boolean;
constructor(callback: (...args: any[]) => void, ms: number) {
this.callback = callback;
this.ms = ms;
this.timer = null;
this.started = false;
}
start() {
if (!this.started) {
this.timer = setInterval(this.callback, this.ms);
this.started = true;
}
}
stop() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
this.started = false;
}
}
get getStarted(): boolean {
return this.started;
}
setInterval(ms: number) {
this.ms = ms;
if (this.started) {
this.stop();
this.start();
}
}
}
You can use it like this:
The timer will stop and start again when interval is changed.
const myTimer = new LoopTimer(()=>{
console.log("Hello");
}, 100);
myTimer.setInterval(500);

There is no way to directly change the interval at which a function fires. The best you can do is cancel an interval and set a new one with the same function and updated timer. Here's a possible way of doing it:
timer = {
timers:{},
inc:0,
start:function(cb,gap) {
var key = inc;
inc++;
timer.timers[key] = [setInterval(cb,gap),cb];
return key;
},
stop:function(id) {
if( !timer.timers[id]) return;
clearInterval(timer.timers[id][0]);
delete timer.timers[id];
},
change:function(id,newgap) {
if( !timer.timers[id]) return;
clearInterval(timer.timers[id][0]);
setInterval(timer.timers[id][1],newgap);
}
};
Usage:
var myTimer = timer.start(function() {....},1000);
// calls every second
timer.change(myTimer,5000);
// now calls every five seconds

timer = setInterval(come, 0); // zero isn't a valid interval...
You probably wants:
come();
timer = setInterval(come, 10000);
docs on MDN:
delay is the number of milliseconds (thousandths of a second) that the setInterval() function should wait before each call to func. As with setTimeout, there is a minimum delay enforced.
And:
Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to the use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5ms.

this is mi example, i think is more simple and easy to understand
const timer = {
time: 5, // 5 time in seconds
_time: null,
_timeout: null,
fun: () => {},
start() {
if (this._timeout == null) {
const self = this;
this.fun();
this._timeout = setTimeout(function repeater() {
self.fun();
self._timeout = setTimeout(repeater, 1000 * self.time);
}, 1000 * this.time);
}
},
stop() {
const timeout = this._timeout;
this._timeout = null;
this.set_time(); // set time to default
clearTimeout(timeout);
},
set_time(time) {
if (this._time == null) this._time = this.time;
if (time) {
this.time = time;
} else {
this.time = this._time;
}
},
};
Explication:
time: is the time of interval between every iteration, cycle or next call
_time: this variable save the default value of time, when use stop(), this variable(_time) restore "time"
start: this function start the iteration, if you call again, it will not duplicate.
stop: this function, stop the timeout and set default time and _timeout
set_time: this function set a new value to time, if you not send a parameter, time restore to default value, declare on running in this example is "5"
example:
const timer = {
time: 5, // 5 time in seconds
_time: null,
_timeout: null,
fun: () => {},
start() {
if (this._timeout == null) {
const self = this;
this.fun();
this._timeout = setTimeout(function repeater() {
self.fun();
self._timeout = setTimeout(repeater, 1000 * self.time);
}, 1000 * this.time);
}
},
stop() {
const timeout = this._timeout;
this._timeout = null;
this.set_time(); // set time to default
clearTimeout(timeout);
},
set_time(time) {
if (this._time == null) this._time = this.time;
if (time) {
this.time = time;
} else {
this.time = this._time;
}
},
};
// print time
timer.fun = () =>{
console.log(new Date())
};
timer.set_time(10)
timer.start()

I know this post is old, but i needed something similar, maybe someone needs it.
This is a version without setInterval, based on the code from the other reaction (Niet the Dark Absol).
function timer()
{
var timer = {
running: false,
iv: 5000,
timeout: false,
cb : function(){},
start : function(cb,iv,sd){
var elm = this;
clearInterval(this.timeout);
this.running = true;
if(cb) this.cb = cb;
if(iv) this.iv = iv;
if(sd) elm.execute(elm);
this.timeout = setTimeout(function(){elm.execute(elm)}, this.iv);
},
execute : function(e){
if(!e.running) return false;
e.cb();
e.start();
},
stop : function(){
this.running = false;
},
set_interval : function(iv){
clearInterval(this.timeout);
this.start(false, iv);
}
};
return timer;
}
Usage:
var timer_1 = new timer();
timer_1.start(function(){
//magic here
}, 2000, false);
var timer_2 = new timer();
timer_2.start(function(){
//more magic here
}, 3000, true);
//change the interval
timer_2.set_interval(4000);
//stop the timer
timer_1.stop();
The last parameter of the start function is a boolean if the function needs to be run at 0.
You can also find the script here: https://github.com/Atticweb/smart-interval

Categories