Develop Reference

What can i do in this case? Setinterval within setinterval countdown timer

I need help or idea for use a countdown inside a setInterval.
heres my countdown timer on js (pretty obvious):
function startTimer(duration) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
document.getElementById('minuteDrag').innerText = minutes;
document.getElementById('secondDrag').innerText = seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
When i call this function outside the second setinterval, that works pecfectly (as expected).
But when i tried to run this function in the code below, the function for time countdown gets bugged, i guess it's because the countdown timer is called within another setinterval.
Any ideas for a solution here? (i can't get out the "main setinterval").
var api = new Lolesports_API();
api.get_event_details('pt-BR', '105562529627228920')
.then(result_games => {
var game_id
result_games.event.match.games.forEach(game => game_id = game.id)
api.get_teams('pt-BR')
.then(result_teams =>{
var teams_dict = {}
result_teams.teams.forEach(team => {teams_dict[team.id] = team.code})
setInterval(function(){
api.get_window(game_id, get_lastest_date())
.then(result_window => {
var last_frame = result_window.frames[result_window.frames.length - 1];
var game_state = last_frame.gameState;
startTimer(60*5)
if (game_state == 'in_game') {
document.getElementById("gameState").style.backgroundColor = '#33cc33';
stopwatch_game.start();
} else if (game_state == 'paused') {
document.getElementById("gameState").style.backgroundColor = '#66a3ff';
stopwatch_game.pause();
} else {
document.getElementById("gameState").style.backgroundColor = '#ff8080';
stopwatch_game.pause();
}
//stopwatch_game.start();
})
}, 500)
})
})
PS: this is not the full code, i remove a large part in order not to pollute the question.

Right now you're starting a new CountDown Interval every half second.
Why not return the value from the setInterval in startTimer so that it can be stopped as necessary by the outer loop?
e.g.
startTimer = (duration) => {
let timer = duration, minutes, seconds;
return setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
document.getElementById('minuteDrag').innerText = minutes;
document.getElementById('secondDrag').innerText = seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
Then in your main loop you can use clearInterval to stop the timer... or at least check if it exists:
let foo = undefined;
if (foo === undefined) {
foo = startTimer(60*5);
}

How do you escape out of an alert box and resume flow of action? - Javascript

So i am writing a simple javascript timer, and at 30 seconds it prompts the user with an alert box if they would like to reset the count down or let it continue.
I am able to reset the timer however I get stuck when the user clicks cancel on the alert box.
I tried letting the timer just resume at its current time but that doesn't help as the alert box just keeps reappearing
I am still very new to javascript so I would like to stay using vanilla js till I get a deeper understanding of the fundamentals!
Any guidance would be greatly appreciated!
Heres my code:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if(timer<30){
var message = confirm("Would you like to extend timer?");
if (message == true) {
timer = 60 * 1;
}
else{
timer = timer;
}
}
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
function resetTimer() {
timer = 60 * 1;
}
window.onload = function () {
var fiveMinutes = 60 * 1,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};

just put if(timer==30) instead of if(timer<30) so that exactly at count of 30 units of time, you get asked once for confirmation at that instance (However be aware that until the confirmation is done, prompts will keep popping up every second). if you extend it, it will again wait till your timer goes down to 30 unit, else it will simply go down to 0 and break out.

function startTimer(duration, display) {
var timer = duration,
minutes,
seconds;
function timerFunc() {
timer -= 1;
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (timer == 30) {
var message = confirm("Would you like to extend timer?");
if (message == true) {
timer = 60;
} else return alert("Your timer has been stopped.")
}
setTimeout(timerFunc, 1000);
}
timerFunc();
}

Javascript start countdown and at the end call ajax

I am trying to start the Javascript countdown using following Javascript code. Here it's counting from 5 - 0.
Now I want when It's 0 then I will call an Ajax request (I know how to do it). But for now, I set it alert message that your session ends.
It continuously showing me the alert message But it's should be once!
Here is the JS code:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if(timer !== 0 ) {
--timer;
} else if( timer == 0 ) {
alert('Your time has been completed.');
}
}, 1000);
}
window.onload = function () {
var seconds = 5,
display = document.querySelector('#time');
startTimer(seconds, display);
};

You need to assign the interval to a variable, so that you can then clear the interval after the final alert so that it doesn't run anymore:
function startTimer(duration, display) {
let timer = duration;
const interval = setInterval(function() {
let minutes = parseInt(timer / 60, 10)
let seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (timer !== 0) {
--timer;
} else if (timer == 0) {
alert('Your time has been completed.');
clearInterval(interval);
}
}, 1000);
}
window.onload = function() {
var seconds = 5,
display = document.querySelector('#time');
startTimer(seconds, display);
};
<div id="time"></div>

you need to make use of clearInterval() method as below
var myVar = setInterval(function(){ myTimer() }, 1000);
myTimer() {
if(conditionMet)
clearInterval(myVar);
}
or just for info you can make use of interval of react js
import { interval } from 'rxjs/observable/interval';
//emit value in sequence every 1 second
const source = interval(1000);
//output: 0,1,2,3,4,5....
const subscribe = source.subscribe(val => {
if(conditionmet)
source.unsubscribe();
console.log(val);
});

ES5
function startTimer(duration, display) {
var timer = duration;
var interval = setInterval(function() {
var minutes = parseInt(timer / 60, 10)
var seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (timer !== 0) {
--timer;
} else if (timer == 0) {
alert('Your time has been completed.');
clearInterval(interval);
}
}, 1000);
}
window.onload = function() {
var seconds = 5,
display = document.querySelector('#time');
startTimer(seconds, display);
};

countdown timer with number reduction after set point?

I've got a working countdown timer which starts at 30 minutes.
With only 3 minutes left (so after 27 minutes) I'd like the number 250 to decrease at random intervals from 3 minutes left down to the end of the countdown.
Any ideas?
https://codepen.io/anon/pen/bWoGrb
// Stopwatch
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var thirtyMinutes = 60 * 30,
display = document.querySelector('#stopwatch');
startTimer(thirtyMinutes, display);
};
<div id='stopwatch'></div>

Maybe use something like this (I hope I clearly understood the question):
Just using a if/else within the condition something to say: Go normal when more than 60*3, and when under 60*3 seconds rest, there is chance to do nothing
// Stopwatch
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
if(timer > 60*3 || Math.random() < 0.25) {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
} else {
/* do not reduce the timer to wait 1 interval more */
/* or maybe do like `timer -= Math.random()` if you want to reduce it faster */
}
}, 1000);
}
window.onload = function () {
var thirtyMinutes = 60 * /*30*/ 4, // just set to 4 to see faster
display = document.querySelector('#stopwatch');
startTimer(thirtyMinutes, display);
};
<div id='stopwatch'></div>

How to stop my javascript countdown by clicking a button?

I have a start button for my countdown, but i want it to stop when i click the stop button.
my html code:
<div>
<span id="timer">25:00</span>
</div>
Start
Stop
my js code:
$('#startTimerButton').click(function starter() {
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 25,
display = $('#timer');
startTimer(fiveMinutes, display);
});
});

First, try to return your interval in the function:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
timeInterval = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
return timeInterval;
}
Then, calling this function assign it to a variable so you can clear it later with:
var countTimeInterval = startTimer();
clearInterval(countTimeInterval);

connect the function with a variable like this: (Try without the 'var')
var my_timer = setInterval(function () { ...
And stop the timer with this function:
$("#stop_btn").click(function(){
clearInterval(my_timer);
});

You need to use the function clearInterval to stop the timer.
$(document).ready(function() {
var handler;
$('#stopTimerButton').click(function () {
if (handler) {
clearInterval(handler);
}
});
$('#startTimerButton').click(function starter() {
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
handler = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 25,
display = $('#timer');
startTimer(fiveMinutes, display);
});
});
});

You need to clear the interval when a button is pressed. Suppose the button to stop is #stopTimerButton. Then, change your js to:
$('#startTimerButton').click(function starter() {
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
interval = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 25,
display = $('#timer');
startTimer(fiveMinutes, display);
});
});
$('#stopTimerButton').click(function() {
clearInterval(interval);
});