I want to restart my count up timer every 5 seconds from the following example: http://jsfiddle.net/stursby/wYUzq/5/
So far, it starts and stops fine, even resets. I would just like to have it automatically go back to 0 and start counting up again after, say, 5 seconds.
I've tried using setInterval() but got weird timing resets from that.
you could add this check in your display() function
if (ms / 5000 > 1)
{
swreset();
startstop();
}
I would use modulos to update the display accordingly. Replace:
$('#count span').text(ms);
with:
$('#count span').text(ms%5000);
at every occurrence.
Related
I'm making a simple game which generates random numbers and user has to enter a value, if users value matches the random value generated, the user wins basically this is a beginner project. I want to make a small counter so that user has a limited time to put in the value and I want that limited time to show on the screen in a label. Lets say that you have to put the value under 30 secs and the timer will count from 1 to 30 every second. The counting from 1 to 30 will update in the label every second. This is the logic I'm trying to work on right now and I can't figure out any other way... If I've done some mistake in code please comment or if you have much more simpler way please post it down below. (pls dont vote down im at threat of account suspension)
Heres the part of my timer code:
if(timer <= 30)
{
for(var i = 0;i >= 30;i++)
{
setInterval(null,1000);
timer++;
document.getElementById("counter").innerHTML = timer+" seconds wasted";
}
alert("Time is over, you lost by "+s);
}
You could create a recursive function.
Say var countDown function(){ time = time--;
setTimeout(countDown, 1000);}
Then you need a variable time that is accessible for the countDown function.
var time = 30;
In the countDown function you could create an updateTimeElement.
Try it out.
The setInterval function has 2 parameters, a callback (an anomynous function in javascript thats triggered) and the milliseconds between each trigger of the interval.
What you are doing in your script is making an interval with nothing to do each second (this runs indefinately), then increment the timer integer and updating the DOM. However, this all executes within seconds.
I'd suggest (before you use a function) you look at the documentation to see how you can improve your script to work as you intent to ;-) Here are a few links that might help you get started:
http://www.w3schools.com/js/js_timing.asp
https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/
I wont be doing the work for you, since this is a good exercise for a beginner programmer ;-)
If you can't figure it out, leave a comment below this answer and I'll get back to you to help you if you need further assistance.
Hi,
I have this code:
//<![CDATA[
$(window).load(function(){
setInterval(function(){
// toggle the class every 10 seconds
$('body').addClass('new');
setTimeout(function(){
// toggle back after 10 seconds
$('body').removeClass('new');
},10000)
},10000);
});//]]>
This code is supposed to add the class "new" to body 10 seconds later after the page first loads and then remove it after 10 seconds again to start all over going into an endless loop. But it wont work as expected. Sometimes it takes way longer than 10 seconds to add the class and it removes it too soon. Some other times it does it only once and then the loop ends just like that.
Whats wrong here? A more effective and reliable alternative will be also welcome.
Thank you.
You've told the code adding the class to run every 10 seconds. Every 10 seconds, you also schedule a timer to remove the class 10 seconds later. So as of the 20th second, you have a race — will the first timer get there first, or will the second? In any case, it won't have the result you want.
Use a single timer that toggles:
setInterval(function() {
$("body").toggleClass("new");
}, 10000);
As for it taking a long time to start, remember that the window load event doesn't occur until all resources have finished downloading, including all of your images and such. So the whole process may be starting quite a bit later than you expect.
Also note that browsers are increasingly "dialing back" timers in inactive tabs, so your timer may not be running, or may run infrequently, when the window it's in doesn't have focus.
From your comment:
But just as a bonus. What if I want to have the class to last 20 seconds but keep the interval in 10 seconds?
That complicates things. You could have a flag that you toggle, and only toggle the class when the flag is in one state or the other. E.g., something like:
(function() { // Scoping function so the flag isn't a global
var flag = true;
setInterval(function() {
if (flag) {
$("body").toggleClass("new");
}
flag = !flag;
}, 10000);
})();
That will add the class at 10 seconds, toggle the flag at 20, remove the class at 30, toggle the class at 40, then start the cycle again. Adjust as needed.
How would I go about disabling/enabling a button when the UNIX timestamp reaches <= 0.
I use AJAX to continuously call a .php-file every 250ms. In this .php-file I check if its been 90 seconds since last action was taken by comparing the time (in UNIX) now to the last time I pressed the button (using a MySQL database).
The comparison is done by subtracting time it was pressed to the time now.
I would like to enable the button when the UNIX timestamp when there's less than or equal to 0 seconds since the button was last pressed.
Having a cooperation between PHP and JavaScript is a challenge, I know that, but I also know there are ways to do this.
Thanks in advance.
You could do this with jquery depending on what the script is about. Rather than calling ajax, you could assign an attribute to the time and then using a jquery setInterval function decrease the time by 1 second and then check whether the time is less than 0 or not?
Example:
HTML:
<input type='submit' id='button' name='button' data-time='(using php, put the seconds in here' />
Jquery
$(document).ready(function() {
var timer = setInterval(function() {
var current = $("#button").data('time');
// get the current value of the time in seconds
var newtime = current - 1;
if (newtime <= 0) {
// time is less than or equal to 0
// so disable the button and stop the interval function
$("#button").prop('disabled', true);
clearInterval(timer);
} else {
// timer is still above 0 seconds so decrease it
$("#button").data('time', newtime);
}
}, 1000);
});
You can just use javascript or jQuery to disable the button by changing it's disabled property. You can use javascript to change it back also.
Example: document.getElementById("myBtn").disabled = true;
Read more here: http://www.w3schools.com/jsref/prop_pushbutton_disabled.asp
Personal project using jQuery.
I'm trying to create a function that runs on the hour for 5 seconds. I've done this by getting the current minutes and acting when they are at '00'. (Although for testing the minutes need to be manually changed to the next minute, unless you want to wait an hour to see it run again.)
The function acts on 2 objects, one to add/remove a class, the other to slideUp/Down.
It works, but after the initial running, the slideDown/Up jQuery causes a "blink" every 5 seconds for the rest of the current minute.
I've tried setting the setInterval for 5000, however that hasn't solved the issue. I'm at my wits end really.
While I am also using moment.js elsewhere. This function isn't using moment(). Primarily because I haven't been able to get functions working with moment() either.
Just head to the ....
jsFiddle example
Remember to set the =='00' to the next minute -- sure makes testing easier I really appreciate anyone waiting for this to run. I know it can be a pain to have to wait a minute to see the function at work.
If you watch the function run for 5 seconds, it will stop... but continue watching.. the slideDown() will repeat every 5 seconds until the minute is no longer XX.
How can I stop this repeat??
Thanks!
There're two place for fix.
1. miss usage for 'clearInterval'
clearInterval parameter is The ID of the timer returned by the setInterval() method.
reference this link, w3c definition for clearInterval.
var intervalId = setInterval(function() { alarm(); }, 5000);
...
clearInterval(intervalId );
2. secs >= "05" condition is wrong
change string "05" to int 5.
Believe it or not I sorted it a few moments after posting this.
My conditional was off, and I thought I tried everything. Guess not.
This works
if((mins == "29") && (secs <= '05')) {
$('#focus').slideDown(500);
$('.projcnt').addClass('jump');
} else {
$('#focus').slideUp(300);
$('.projcnt').removeClass('jump');
}
And the ...
working, updated fiddle
I need to be able to call this function to reset the interval.
I know this has been asked before. But the answer given at
Javascript - Reset setInterval back to 0
is not working for me.
Here is the code that I tried:
function startTimer(){
clearInterval(interval);
var interval = setInterval(function(){
advanceSlide();
}, 5000);
};
I call that at the beginning of my page to start a slideshow that changes every 5 seconds. and I use this code to call it again, witch I expected would reset that 5 seconds.
onclick=startTimer();>
The onclick does one other thing too, but this is what is not working. The other action takes place but the interval does not change, its still going based off the same portion of 5 seconds that was left before I clicked.
You need to declare the variable outside the function...
var interval;
function startTimer() {
clearInterval(interval);
interval = setInterval(advanceSlide, 5000);
}
Otherwise it is lost when the function exits.