Develop Reference

Stop recursive setTimeout function

Im running a recursive setTimeout function and I can run it many times, it has a clearTimeout, with this property I can handle how to stop the function running.
But I can't figure out how to stop it in another function.
var a = 0;
var b = 0;
function Listener(x, y) {
var lValue = y == true ? a : b;
if (lValue < 100) {
console.log(lValue);
if(y == true){
a+=x;
}else{
b+=x;
}
setTimeout(Listener.bind(this, x, y), 1000);
} else {
clearTimeout(Listener);
if(y == true){
a=0;
}else{
b=0;
}
}
}
When i tried to run it twice, it works:
My doubt is: How can I stop a particular running instance.

A couple notes:
Given the constant timeout of 1000, you should be using setInterval() instead. It will greatly simplify your function, and allow you to cancel the interval whenever you want.
Using global variables is code smell, create an object instead to hold a reference to the value being incremented. Doing so will also allow your function parameters to be more intuitive.
Here's a solution incorporating these two suggestions:
function range (step, start = 0, stop = 100) {
const state = {
value: start,
interval: setInterval(callback, 1000)
};
function callback () {
if (state.value < stop) {
console.log(state.value);
state.value += step;
} else {
console.log('timer done');
clearInterval(state.interval);
}
}
callback();
return state;
}
const timer1 = range(10);
const timer2 = range(20);
setTimeout(() => {
console.log('stopping timer 1');
clearInterval(timer1.interval);
}, 2500);
setTimeout(() => {
console.log('timer 2 value:', timer2.value);
}, 3500);

You could elevate the timer to a higher scope that is accessible by other functions.
var a = 0;
var b = 0;
var timer = null;
function Listener(x, y) {
var lValue = y == true ? a : b;
if (lValue < 100) {
console.log(lValue);
if (y == true) {
a += x;
} else {
b += x;
}
timer = setTimeout(Listener.bind(this, x, y), 1000);
} else {
clearTimeout(timer);
if (y == true) {
a = 0;
} else {
b = 0;
}
}
}
function clearTimer() {
if (timer !== null) clearTimeout(timer);
}
Listener(3, 3);
// clear the timer after 3 secnods
setTimeout(clearTimer, 3000);

create a variable and store the reference of setTimout on that variable, after that you just clearTimout with that variable reference
e.x
GLOBAL VARIABLE:
var k = setTimeout(() => { alert(1)}, 10000)
clearTimeout(k)
var a = 0;
var b = 0;
var recursiveFunctionTimeout = null;
function Listener(x, y) {
var lValue = y == true ? a : b;
if (lValue < 100) {
console.log(lValue);
if(y == true){
a+=x;
}else{
b+=x;
}
recursiveFunctionTimeout = setTimeout(Listener.bind(this, x, y), 10);
} else {
clearTimeout(recursiveFunctionTimeout);
if(y == true){
a=0;
}else{
b=0;
}
}
}
LOCAL VARIABLE:
var a = 0;
var b = 0;
function Listener(x, y) {
var lValue = y == true ? a : b;
var recursiveFunctionTimeout = null;
if (lValue < 100) {
console.log(lValue);
if(y == true){
a+=x;
}else{
b+=x;
}
recursiveFunctionTimeout = setTimeout(Listener.bind(this, x, y), 10);
} else {
clearTimeout(recursiveFunctionTimeout);
if(y == true){
a=0;
}else{
b=0;
}
}
}

Why can't I clear this timer in JavaScript?

There is an object.
There is this method that initializes the timer in another method within the same object.
initstep1() {
var totAns = TriviaGame.corAnswered + TriviaGame.incorAnswered;
//for (let v=0;v<TriviaGame.arrayOfSelected.length;v++){TriviaGame.arrayOfSelected.pop();}
//for (let u=0;u<TriviaGame.arrayOfIntervals.length;u++){clearInterval(TriviaGame.arrayOfIntervals[u]);TriviaGame.arrayOfIntervals.pop();}
$("#maincontact0").css("display", "none");
$("#maincontact2").css("display", "none");
$("#maincontact1").css("display", "flex");
if (totAns != 10) {
TriviaGame.populatePromptContent();
} else {
TriviaGame.initstep3();
}
if (TriviaGame.corAnswered == 0 && TriviaGame.incorAnswered == 0) {
TriviaGame.giveQuestionsClickEvents();
TriviaGame.giveAnswersClickEvents();
}
$("#maincontact1qr").text() == 30;
TriviaGame.timerOnTheRight();
}
It's called timerOnTheRight...
Here it is...
Never gets cleared no matter what I do.
timerOnTheRight() {
//for (let u=0;u<TriviaGame.arrayOfIntervals.length;u++){clearInterval(TriviaGame.arrayOfIntervals[u]);TriviaGame.arrayOfIntervals.pop();}
console.log(TriviaGame.arrayOfIntervals);
let countDown1 = 30;
var thisVeryTimer = setInterval(function() {
countDown1--;
if ($("#maincontact1qr").text() != 1) {
$("#maincontact1qr").text(countDown1);
}
if ($("#maincontact1qr").text() < 11) {
$("#maincontact1qr").css("color", "orange");
}
if ($("#maincontact1qr").text() < 4) {
$("#maincontact1qr").css("color", "red");
}
if ($("#maincontact1qr").text() == 1) {
TriviaGame.arrayOfCurrent[0].timespent = "Yes";
clearInterval(thisVeryTimer);
TriviaGame.initstep2();
}
}, 600);
}

Make sure the conditional is correct, and the inside the conditional block is working when conditioning is met. You should console out thisVeryTimer to make sure it is the same interval id.
Another issue should be the scope of the variable.
clearInterval(thisVeryTimer);
Try to move the above code out of the interval block.

Setting timer of seconds and milli seconds

var count = 24000,
running = true,
secondsNode = document.getElementById("seconds"),
millisecondsNode = document.getElementById("milliseconds"),
mOld,
mNew;
function draw() {
if (count > 0 && running) {
requestAnimationFrame(draw);
mNew = new Date().getTime();
count = count - mNew + mOld;
count = count >= 0 ? count : 0;
mOld = mNew;
secondsNode.innerHTML = Math.floor(count / 1000);
millisecondsNode.innerHTML = count % 1000;
}
}
mOld = new Date().getTime();
draw();
window.addEventListener("keydown", function(e) {
switch (e.keyCode) {
case 32: // PLAY
if (running) {
running = false;
} else {
running = true;
mOld = new Date().getTime();
draw();
}
break;
case 82: // RESET
count = 24000;
secondsNode.innerHTML = 24;
millisecondsNode.innerHTML = 0;
running = false;
}
});
<p><span id="seconds">4</span> secs and <span id="milliseconds">000</span> milliseconds</p>
This is the code for timer. Here what is happening is the timer starting from 24 seconds and ending in 0. But what I need is I need to start this timer from 0 to 4 seconds. Can we do that? If that so please help. Thanks:)

In order to achieve this, you need to change the time decrementer to an incrementer by using:
count = count + mNew - mOld;
Also, you need to ensure that your conditions and checks stop when you reach 4000 instead of 0.
See working example below:
var count = 0,
running = false,
secondsNode = document.getElementById("seconds"),
millisecondsNode = document.getElementById("milliseconds"),
mOld,
mNew;
function isElementInViewport(el) { // run function to check if the element is in the viewport
var rect = el.getBoundingClientRect();
return rect.bottom > 0 && rect.right > 0 && rect.left < (window.innerWidth || document.documentElement.clientWidth) && rect.top < (window.innerHeight || document.documentElement.clientHeight);
}
window.addEventListener('scroll', function() { // everytime we scroll
if(isElementInViewport(secondsNode)) { // check if the p element is on the screen - if it is then:
running = true; // start the timer (unpause it)
mOld = new Date().getTime();
draw();
} else { // if the element is off the screen then
running = false; // pause the timer
}
});
function draw() {
if (count < 4000 && running) { // change to check count < 4000 to keep running
requestAnimationFrame(draw);
mNew = new Date().getTime();
count = count + mNew - mOld; // change to increment the count
count = count >= 4000 ? 4000 : count; // change stop the clock from incrementing
mOld = mNew;
secondsNode.innerHTML = Math.floor(count / 1000);
millisecondsNode.innerHTML = count % 1000;
}
}
window.addEventListener("keydown", function(e) {
switch (e.keyCode) {
case 32: // PLAY (space)
if (running) {
running = false;
} else {
running = true;
mOld = new Date().getTime();
draw();
}
break;
case 82: // RESET (r)
count = 0;
secondsNode.innerHTML = 0;
millisecondsNode.innerHTML = 0;
running = true;
}
});
.other {
padding-bottom: 100vh;
}
<div class="other"></div>
<p><span id="seconds">4</span> secs and <span id="milliseconds">000</span> milliseconds</p>
<div class="other"></div>

Can Jquery take the form input straight from the form, or do I have to use a SET button in my script?

I've got a script that is a simple countdown.
You can put in a number press SET and then click START and the number will count down.
I use this in the gym, but I forget to press the SET button a lot after entering the new count.
Is it possible to let jquery take the form input or do I have to use a SET button?
var CCOUNT;
$(document).ready(function() {
$('#btnct').click(function() {
CCOUNT = $('#seconds').val();
cdreset();
});
});
var t, count;
function cddisplay() {
document.getElementById('timespan').innerHTML = count;
}
function countdown() {
// starts countdown
cddisplay();
changeColor(CCOUNT);
if (count === 0) {
// time is up
} else {
count--;
t = setTimeout(countdown, 1000);
$("#onebuttons").attr('disabled', 'disabled');
}
}
function cdpause() {
// pauses countdown
clearTimeout(t);
$("#onebuttons").removeAttr('disabled');
}
function cdreset() {
// resets countdown
cdpause();
count = CCOUNT;
cddisplay();
$("#onebuttons").removeAttr('disabled');
}
function changeColor() {
if (count <= 1000 && count > 29) {
document.getElementById('timespan').style.color = "#00CC00";
} else if (count <= 29 && count > 9) {
document.getElementById('timespan').style.color = "#F87217";
} else if (count <= 9 && count > 3) {
document.getElementById('timespan').style.color = "#ff0000";
} else if (count === 3) {
var audio = document.createElement("audio");
audio.src = "3-2-1-0.m4a";
audio.play();
}
if (count === 0) {
document.getElementById('timespan').style.color = "#ffffff";
}
if (count < 10) {
$("#timespan").fadeOut('slow', function() {
$("#timespan").text(count);
$("#timespan").fadeIn();
});
}
}

yes, just let the call out of the on click method
like this
var CCOUNT;
$(document).ready(function() {
CCOUNT = $('#seconds').val();
cdreset();
});
It will make your method fire at the time the page finnish loads

Mirroring function to do the opposite

I have this event to turn my music of by fading it out
$(bgMusic).on('timeupdate', function () {
var vol = 1,
interval = 250;
if (bgMusic.volume == 1) {
var intervalID = setInterval(function () {
if (vol > 0) {
vol -= 0.05;
bgMusic.volume = vol.toFixed(2);
} else {
clearInterval(intervalID);
}
}, interval);
}
});
I now want the same thing for turning the music on.
I have tried creating the opposite like this:
$(bgMusic).off('timeupdate', function () {
var vol = 0,
interval = 250;
if (bgMusic.volume == 0) {
var intervalID = setInterval(function () {
if (vol < 0) {
vol += 0.05;
bgMusic.volume = vol.toFixed(2);
} else {
clearInterval(intervalID);
}
}, interval);
}
});
Where am I going wrong?

If you change:
if (vol < 0) {
to:
if (vol < 1) {
... I think the volume should gradually increase until it meets it maximum value of 1, hence giving you the "fade in" effect you ask for.

Not sure about your code but I think you don't want to use the off function in your second example.
jQuery off:
Description: Remove an event handler.
So try your second code with on to, since you want to register to the event, not remove it.

since your vol is 0 , it doesnot goes inside the if condition.. if (vol < 0) {...
it should be
if (vol < 1) {
vol += 0.05;
bgMusic.volume = vol.toFixed(2);
} else {
clearInterval(intervalID);
}