Develop Reference

JS - Reset timer when click

I have a 5 minutes countdown. This function launch automatically when page load. I want to reload data of page and resetting this countdown. The code looks like this.
HTML
<a onClick="timer()" title="Pincha para actualizar" class="pull-right" id="time"></a>
JS
function timer(){
var timer = 60 * 5, 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;
$('#time').text("Tiempo restante para actualización de datos " + minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
The problem: When i click the link the timer goes crazy, doesn´t reset properly.
Anybody knows what´s the rigth way to reset countdown?

You are missing a clearInterval otherwise you are creating a new interval each time you click on the element.
let interval = null;
function timer(){
var timer = 60 * 5, minutes, seconds;
if (interval !== null) {
clearInterval(interval);
}
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;
$('#time').text("Tiempo restante para actualización de datos " + minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}

you can use clearInterval inside setInterval itself
function timer(){
var timer = 60 * 5, minutes, seconds;
interval = setInterval(()=> {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
$('#time').text("Tiempo restante para actualización de datos " + minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
if (interval !== null) clearInterval(interval);
}, 1000);
}

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>

stop timer if interval reach to 0

I need to stop the timer if it reach to 0.I need to stop the countdown at 00.00 and display alert(countdown stopped).now It starts again.need to stop after reach to 00.00
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 fiveMinutes = 60 * .05,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
<body>
<div>Registration closes in <span id="time">start</span> minutes!</div>
</body>

Please use clearInterval as show in snippet.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var __timer = 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) {
clearInterval(__timer);
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * .05,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
<body>
<div>Registration closes in <span id="time">start</span> minutes!</div>
</body>

Orr you could wrap this line of code
if (--timer < 0) {
timer = duration;
}
with
if (display.textContent != "0:00") {
if (--timer < 0) {
timer = duration;
}
}

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);
});

Set variable to false at the end of countdown timer

I might just be being dense here... I have a variable timeDiscount that is true when page loads. Also when page loads, counter begins. At end of counter, I set timeDiscount to false... except that this doesn't seem to work...
In this jsFiddle, clicking the "CLICK" word will alert you to the current state of timeDiscount, the click returns true even after the counter has stopped. Why is that?
https://jsfiddle.net/df773p9m/4/
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = 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) {
clearInterval(refreshIntervalId)
timeDiscount = false;
}
}, 1000);
}
jQuery(function ($) {
var timeDiscount = true
var fiveMinutes = 5,
display = $('#time');
startTimer(fiveMinutes, display);
$("#discount").click(function() {
alert(timeDiscount);
})
});

You have a scoping problem.
In your code, timeDiscount is declared inside the unnamed function that's executed on page load (jQuery(function ($) {...). The variable is only known by this identifier inside this function, but you're trying to access it from the startTimer function.
Move the declaration outside of the unnamed function:
var timeDiscount = true
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = 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) {
clearInterval(refreshIntervalId)
timeDiscount = false;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 5,
display = $('#time');
startTimer(fiveMinutes, display);
$("#discount").click(function() {
alert(timeDiscount);
})
});

variable must be global to access it in javascript function so keep it at outer level
var timeDiscount = true
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = 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) {
clearInterval(refreshIntervalId)
timeDiscount = false;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 5,
display = $('#time');
startTimer(fiveMinutes, display);
$("#discount").click(function() {
alert(timeDiscount);
})
});

There are two ways to make it happen first is: to move your timeDiscount variable outside the function to make it a global variable like this:
var timeDiscount = true
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = 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) {
clearInterval(refreshIntervalId)
timeDiscount = false;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 5,
display = $('#time');
startTimer(fiveMinutes, display);
$("#discount").click(function() {
alert(timeDiscount);
})
});
Or you could just simply add the window in your timeDiscount inside the function like this and make it window.timeDiscount (refer to this link Define global variable in a JavaScript function):
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
refreshIntervalId = 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) {
clearInterval(refreshIntervalId)
timeDiscount = false;
}
}, 1000);
}
jQuery(function ($) {
window.timeDiscount = true
var fiveMinutes = 5,
display = $('#time');
startTimer(fiveMinutes, display);
$("#discount").click(function() {
alert(timeDiscount);
})
});

You need to declare the timeDiscount variable in global scope, i.e., before startTimer function, so that when you refer to the same in startTimer(), it would be available to it,else it would create a global variable and set it to false.
The variable(timeDiscount) created in global scope is entirely different from the one present inside your $(function() { var timeDiscount=true; }) which is local to that scope, thats why you never got any error nor did you get what you expected.
JS Code:
var timeDiscount = true;
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;
timeDiscount = false;
}
}, 1000);
}
Live Demo # JSfiddle