Develop Reference

Countdown timer jquery on reset it runs faster then time set

I am trying to make a countdown timer where I can change the value of the countdown or rest the countdown but I am not able to clear the last timer so the value of the timer is added again to speed if increased please help me I am also sharing the code.
var sec = $("#timer_this").val();
$("#start").click(function() {
var sec = $("#timer_this").val();
startTimer('start');
});
$("#reset").click(function() {
$("#timer").html(0);
var timex = 0;
clearTimeout(timex);
var timex = 0;
startTimer('start');
});
$("#stop").click(function() {
$("#timer").html($("#timer_this").val());
clearTimeout(timex);
});
function startTimer() {
timex = setInterval(function() {
//document.getElementById('timer').innerHTML = sec + "sec left";
$("#timer").html(sec);
sec--;
if (sec == -1) {
clearInterval(timex);
time = null;
alert("Time out!! :(");
}
}, 1000);
}
$("#stopbtn").click(function() {
clearTimeout(timex);
});
<script src="https://code.jquery.com/jquery-2.0.3.min.js" integrity="sha256-sTy1mJ4I/LAjFCCdEB4RAvPSmRCb3CU7YqodohyeOLo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<input type="text" id="timer_this" value="1000">
<span id="timer"></span>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="pause">pause</button>
<button id="reset">reset</button>

several little things to have a working sample :
var timex; should be declared globally if you want to set is value in the several callbacks
in the reset callback you do var timex = 0; first issue you recreate a local function variable timex but you to do it twice that is not valid
for the reset function you can simplyfy it by :
create a stop function
your reset callback became
$("#reset").click(function() {
stopTimer();
startTimer();
});
var sec = $("#timer_this").val();
var timex;
$("#start").click(function() {
var sec = $("#timer_this").val();
startTimer('start');
});
$("#reset").click(function() {
stopTimer();
startTimer();
});
$("#stop").click(stopTimer);
function stopTimer() {
$("#timer").html($("#timer_this").val());
clearTimeout(timex);
timex = undefined;
}
function startTimer() {
if (!timex) {
sec = $("#timer_this").val();
}
timex = setInterval(function() {
$("#timer").html(sec);
sec--;
if (sec == -1) {
clearInterval(timex);
time = null;
alert("Time out!! :(");
}
}, 1000);
}
$("#pause").click(function() {
clearTimeout(timex);
});
<script src="https://code.jquery.com/jquery-2.0.3.min.js" integrity="sha256-sTy1mJ4I/LAjFCCdEB4RAvPSmRCb3CU7YqodohyeOLo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<input type="text" id="timer_this" value="1000">
<span id="timer"></span>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="pause">pause</button>
<button id="reset">reset</button>

The timex variable was assigned in the scope of the startTimer function and is lost once that function returns, so it is not available when you later come to call clearTimeout on it.
When building out your logic, its often useful to create functions that describe the actions you want to happen, then call them from your UI components. This helps make the code more readable and reduces repetition.
For example, it's simpler to have clearTimeout in one place, and just call it from whichever methods need to stop the timer. It also helps later when getting the UI to reflect the current state of the application since there's only one way to get to that state.
Here's an example of this sort of approach:
let timerx, sec;
$("#start").click(function() {
// Toggle between start/stop
sec ? stopTimer() : startTimer();
});
$("#pause").click(function() {
// Toggle between pause/resume
timerx ? pauseTimer() : resumeTimer();
});
function startTimer() {
// Stop any existing timer
stopTimer();
// Grab the new count
sec = parseInt($("#timer_this").val());
// Start the timer
resumeTimer();
$("#start").text("stop");
$("#pause").prop("disabled", false);
}
function resumeTimer() {
// Start timer
timerx = setInterval(() => {
// Update time remaining
$("#timer").text(--sec);
if (sec === 0) {
// Handle timeout
stopTimer();
alert("Time out!! :(");
}
}, 1000);
$("#timer").text(sec);
$("#pause").text("pause");
}
function stopTimer() {
// Start timer and clear remainng time
sec = 0;
pauseTimer();
$("#timer").text("");
$("#start").text("start");
$("#pause").prop("disabled", true);
}
function pauseTimer() {
// Just stop the timer
timerx = clearInterval(timerx);
$("#pause").text("resume");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="number" id="timer_this" value="1000">
<button id="start">start</button>
<button id="pause" disabled>pause</button>
<p id="timer"></p>

Javascript auto page refresh code

this is the code that comes in head section and it will automatically refresh the whole page in 1 min as i put 6000 in the code below
<script type="text/javascript">
setTimeout('window.location.href=window.location.href;', 6000);
</script>
is there any way for example, when there's 10 seconds left to refresh the page then, a button will display and say "Click here to reset timer" and it will reset that timer to 1 min again?

<script language="javascript">
var timeout,interval
var threshold = 15000;
var secondsleft=threshold;
startschedule();
window.onload = function()
{
startschedule();
}
function startChecking()
{
secondsleft-=1000;
if(secondsleft <= 10000)
{
document.getElementById("clickme").style.display="";
document.getElementById("timercounter").innerHTML = Math.abs((secondsleft/1000))+" secs";
}
}
function startschedule()
{
clearInterval(timeout);
clearInterval(interval);
timeout = setTimeout('window.location.href=window.location.href;', threshold);
secondsleft=threshold;
interval = setInterval(function()
{
startChecking();
},1000)
}
function resetTimer()
{
startschedule();
document.getElementById("clickme").style.display="none";
document.getElementById("timercounter").innerHTML="";
}
</script>
Please wait...<span id="timercounter"></span>
<button id="clickme" style="display:none;" onclick="javascript:resetTimer();">Click here to reset timer</button>

Assuming you have the following html for the button:
<button id="cancel-reload-button" style="display: none" onclick="cancelReload()">Cancel Reload</button>
And this as the script (Note: this gives the idea, but is not neccesarily fully tested):
// Variable for holding the reference to the current timeout
var myTimeout;
// Starts the reload, called when the page is loaded.
function startReload() {
myTimeout = setTimeout(function() {
document.getElementByID("cancel-reload-button").style.display = "inline";
myTimeout = setTimeout(function() {
window.location.reload();
} 10000)
}, 50000);
}
// Cancel the reload and start it over. Called when the button is
// clicked.
function cancelReload() {
clearTimeout(myTimeout)
startReload()
}
// On page load call this function top begin.
startReload();
I created two functions, one for starting the reload and the second one for cancelling it.
Then I assigned the timeout to the variable myTimeout which can be used to later cancel the timeout.
Then I called myTimeout twice - Once for 50 secs, at which point it shows the button and once for 10 secs after which it finally reloads.

How about below? If you click on OK to reset timer, it would keep giving the confirm box every 50 seconds. If you click cancel, it will refresh the page in 10 seconds.
setInterval(function(){ var r = confirm("Reset Timer");
if (r == true) {
setTimeout('window.location.href=window.location.href;', 60000);
} else {
setTimeout('window.location.href=window.location.href;', 10000);
}
}, 50000);
Note: In your question you specified 1 minute, but your code works for 6 seconds(6000 -- > 6 seconds not 60 seconds) I have included for a minute

You can use 2 setTimeout calls, one to make the "Reset" button show up and another one for the refresh timer reset. The trick is to store the second setTimeout on a global variable and use clearTimeout to reset it if the button is pressed.
Here is some JavaScript code to illustrate:
<script type="text/javascript">
var autoRefreshTime = 30 * 1000; // 60000ms = 60secs = 1 min
var warningTime = autoRefreshTime - (10 * 1000); // 10 secs before autoRefreshTime
waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
warningTimeout = setTimeout('ShowResetButton();', warningTime);
function ShowResetButton() {
// Code to make the "Reset" button show up
}
// Make this function your button's onClick handler
function ResetAutoRefreshTimer() {
clearTimeout(waitTimeout);
waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
}
</script>

The way I would do it is make a function with a timeout, and invoke that function
<script type="text/javascript">
var refreshFunc = function(){
setTimeout(function(){
var r = confirm("Do you want to reset the timer?");
if(r === false){
window.location.href=window.location.href;
}else{
refreshFunc();
}
}, 6000);
};
refreshFunc();
</script>
One big problem with using confirm in this case is you cannot program it to reject. You would have to implement you own modal/dialog box so you can auto reject in 10 seconds.

Try using setInterval():
var time;
$(function() {
time = $('#time');
$('#reset').on('click', reset);
start();
});
var timer, left;
var start = function() {
left = +(time.text()); //parsing
timer = setInterval(function() {
if (0 <= left) {
time.text(left--);
} else {
clearInterval(timer);
location.replace(location);
}
}, 1000);
};
var reset = function() {
if (timer) {
clearInterval(timer);
}
time.text('59');
start();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1><span id='time'>59</span> second(s) left</h1>
<input id='reset' value='Reset' type='button' />

invoke function everytime a boolean becomes false in JavaScript

I'm trying to invoke a function everytime the "paused" property of a html audio element gets false.
I have a timer which shall count the time a audiofile is actually listened to (i also want to exclude the time while searching with the time bar).
I tried it with SetInterval checking all the time for the status of "paused". Unfortunately this isn't working accurately and quite often misses the status change and so lets the time counter count on.
Is there a simple way to invoke a function everytime a boolean changes?
Help would be very appreciated.
Thanks, f.
Thanks for you answer. Unfortunately this didn't do the trick.
Here's the Code:
<html>
<head>
</head>
<body>
<h5 id="test">Audio Timer</h5>
<audio id="player" src="kerry.wav" controls></audio>
<form name="d">
<input type="text" size="8" name="d2">
<h1 id="time"></h1>
</form>
<script>
var audio = document.getElementById("player");
var millisec = 0;
var seconds = 0;
var timer;
function display() {
if (millisec >= 99) {
millisec = 0
seconds += 1
} else
millisec += 1
document.d.d2.value = seconds + "." + millisec;
timer = setTimeout("display()", 10);
}
function starttimer() {
if (timer > 0) {
return;
}
display();
}
function stoptimer() {
clearTimeout(timer);
timer = 0;
}
function startstoptimer() {
if (timer > 0) {
clearTimeout(timer);
timer = 0;
} else {
display();
}
}
function resettimer() {
stoptimer();
millisec = 0;
seconds = 0;
}
setInterval(function () {
var time = audio.paused;
if (time == false) {
startstoptimer();
}
}, 1);
</script>
</body>
</html>
Unfortunately the SetInterval(function().. isn't fast enough to track the audio.paused. which seems is what i need. As you can see this code always does start the timer, but quite often it doesn't stop it when you press pause or when you use the time bar to seek through the audio.
Any idea how to accomplish that?

Create a variable that calls your audio tag
var yourAudio = document.getElementById("audio")
And then
yourAudio.onpause=YourFunction()
If that is not what you are looking for, post your code or part of it, give us more information.

With a while (true) my page didn't even load. But I finally brought it to life by adding two event listeners listening to "playing" and "pause" which invoke the startstoptimer function.
audio.addEventListener("playing", startstoptimer);
audio.addEventListener("pause", startstoptimer);
those two lines were all it needed :)
thanks.

Simple JavaScript counter function

I would like to make a counter function, and precise a variable for the starting time and the place to be displayed.
So if I would like to have many counter per page, I can easily manage it:
$(document).ready(function() {
// set time and place (where to display the counter)
function countDown(time, place){
if(time > 0){
time--;
setInterval(function(){countDown(time,place)}, 1000);
} // end if
if(time == 0)
{
window.clearInterval(time);
}
} // end function
$('.click').click(function(){
countDown(30, '#counter');
});
}); // end DOM
</script>
</head>
<body>
<div class="click">clickme</div>
<br />
<div id="counter">30</div>
</body>

Try this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var myVar;
var clickcount=0;
function countDown (time, place) {
if (time > 0) {
$(place).html(time);
time--;
myVar=setTimeout(function () { countDown(time, place); }, 1000);
}
}
function startreset(time,place){
clickcount++;
if(clickcount % 2 === 0){
clearTimeout(myVar);
} else {
countDown(time,place);
}
}
$('.click').click(function(){
startreset(30, '#counter');
});
</script>
</head>
<body>
<div class="click" onClick="javascript:countDown(30,'#counter');">clickme</div>
<br />
<div id="counter">30</div>
</body>

The problem you are likely having is that you are calling setInterval multiple times. setInterval does more than just wait the x milliseconds you tell it to and then call your method, it continues to call your method every subsequent x milliseconds. So, when you call countDown the first time, an interval is set for your function. That interval expires and countDown is called again. All fine so far, but now the second call to countDown establishes ANOTHER setInterval. The program will wait your x milliseconds to call countDown from the second setInterval, but it will call it from the first setInterval sooner.
...In other words, you shouldn't be repeatedly calling setInterval. What you want is setTimeout, which waits the specified amount of time and then calls the specified method once.
function countDown (time, place) {
if (time > 0) {
time--;
$(place).html(time);
setTimeout(function () { countDown(time, place); }, 1000);
}
}
Alternatively, if you're not feeling recursive today:
function countDown (time, place) {
var interval = setInterval(function () {
if (time > 0) {
time--;
$(place).html(time);
} else {
window.clearInterval(interval);
}
}, 1000);
}
which leverages setInterval, BUT ONLY ONCE.
JSFiddle provided: http://jsfiddle.net/LKvBR/

Reset slide interval JQuery

I've made a slide show width a javascript and Jquery. But I need to reset the slide interval when the user is navigating manualy to the next or previous slide. I am relatively new to javascipt and it's syntax. Any help will be appriciated. Here is my code:
<script type="text/javascript" src="/elements/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var currentSlideId = 0;
var slidesAmount = 0;
function selectSlide(id) {
jQuery(".startpage-test.slide" + id).show().siblings(".startpage-test").hide();
jQuery(".slideshow-show-active.slide" + id).addClass("active").siblings(".slideshow-show-active").removeClass("active");
}
function nextSlide() {
currentSlideId++;
if (currentSlideId >= slidesAmount) currentSlideId = 0;
selectSlide(currentSlideId);
}
function prevSlide() {
currentSlideId--;
if (currentSlideId < 0) currentSlideId = slidesAmount - 1;
selectSlide(currentSlideId);
}
jQuery(document).ready(function() {
slidesAmount = jQuery(".startpage-test").length;
jQuery(".show_previous").click(function() {
prevSlide();
return false;
});
jQuery(".show_next").click(function() {
nextSlide();
return false;
});
window.setInterval(function() {
nextSlide();
}, 7000);
});
jQuery("object.flashContent").each(function () {
swfobject.registerObject(jQuery(this).attr("id"), "9.0.0");
});
</script>
The next-/prev-button looks like this:
<div class="show_next">
<span class="slide_nav"><img src="/elements/next.png" width="57" alt="Next"></span>
</div>
<div class="show_previous">
<span class="slide_nav"><img src="/elements/prev.png" width="57" alt="Previous"></span>
</div>
In all slides there is a link of course, and it would also be nice to stop the slide interval when hovering this a-tag. Unfortunately I don't know how to do this either.

You can assign the result of setInterval() to a variable, then call clearInterval() passing in that variable whenever you need. So in your case, change this code:
window.setInterval(function() {
nextSlide();
},
to this:
var interval = window.setInterval(function() {
nextSlide();
},
Then, in any.hover(), .mouseenter(), .click() or whatever other mouse event handler you are using, simply call:
window.clearInterval(interval);
Of course, you need to reinstate the interval when you want to restart it!