I have FlipClock code as following
var clockDuration = $('.clock-duration').FlipClock({
// ... your options here
});
Clock working fine but I have requirement as follows
For e.x - Normally Clock start as 00:00(mm:ss) and after 60 seconds it shows 00:59(mm:ss) and after that it will change minute 01:00(mm:ss) but I want change this when clock start it should be started as 00:01 and after 60 seconds it should shown as 00:60 and after that 01:00
Basically I need to change FlipClock start and end seconds setting
Can you please help me out from this stuck?
I refer following site for this but not found solution for this
FlipClock
With such requirements I can see only 4 solutions:
Change core code of FlipClock javascript file.
Make javascript callback funcion on seconds change in FlipClock and change text in time block manually. It's pretty complex with many exeptions that will be finded.
As you want to show after 60 seconds time: 00:60 and then 01:00, so you want in 1 second show 2 seconds... That's very strange behavior that makes no sense and no real profit. Best solution - give up in this idea, because it will cost much time with bad results in the end.
Make your own timer.
I think 3 is best. Next best is 4 alternative.
Related
Why this is important to me
I have a site where I need to have a countdown timer running to show people how much time they have left to complete an action.
This timer will run for days and probably just use MomentJS to say something like "in 4 days" from MomentJS's to() function.
However when we have an hour left to go I'm going to switch over to a countdown by minutes timer, eventually when the minutes get low enough, I'm going to have a seconds timer involved. When we're getting down to the very last few minutes I'm going to even display milliseconds.
The problem
Pretty much there are two main techniques to animate the countdown timer.
setInterval()
requestAnimationFrame()
Well, right away I noticed that the requestAnimationFrame() method was much more smooth to the eye, it works great - especially when I'm displaying milliseconds. However it wasn't long when I noticed that my poor computer started to get a little warm. All of this "animation" is causing quite a load on my CPU. I tried to use CPU monitors, and looked around at ways to see how much load this puts on my CPU but, overall I can't really find a tool that gives me a clear graph of what kind of CPU load my little countdown timer is using.
So, I decided to find a way to limit the FPS and see if that would reduce my problem. And yes, it does. If you use setTimeout() in tandem with requestAnimationFrame() you can set a waiting time before you call your next function.
Which raises the question, if you're using setTimeout() - Why don't you just use setInterval() and forget about the extra optimization that requestAnimationFrame() gives you?
I did some looking around and found another method which simply checks to see if the right amount of interval time has passed since the last time requestAnimationFrame() called your function. I made some optimizations to how this code works and ended up with one of the two functions I'm trying to measure below.
In the end, I'd really like to have a more clear way to measure this - because the activity monitor on my mac is hardly reliable tool to give an accurate reading - and I can't find a way to measure just the code I'm running.
Chrome has some more tools, the profiler, and the timeline - which are both very helpful, but they don't give me the metric I'm looking for - CPU load.
The Code:
Here are four code snippets, which do exactly the same thing - all of them use:
MomentJS
CountdownJS
jQuery
The code is 100% identical, the only difference is how I am limiting the FPS of the animation.
I'd like to find a way to measure (as precisely as possible) the difference between the four functions in how much CPU load they are taking. And then I'd like to then change the FPS around to see if I can find an acceptable load for my application and then I can find the sweet spot - the right amount of FPS, during the different timer stages.
Technique 1 - setTimeout()
var now = moment(); // new Date().getTime();
var then = moment().add(60, 'seconds'); // new Date(now + 60 * 1000);
$(".now").text(moment(now).format('h:mm:ss a'));
$(".then").text(moment(then).format('h:mm:ss a'));
$(".duration").text(moment(now).to(then));
(function timerLoop() {
setTimeout(function(){
$(".difference").text(moment().to(then));
$(".countdown").text(countdown(then, null, countdown.YEARS | countdown.MONTHS | countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS | countdown.MILLISECONDS).toString());
requestAnimationFrame(timerLoop);
}, 1000/30);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<div>
The time is now: <span class="now"></span>, a timer will go off <span class="duration"></span> at <span class="then"></span>
</div>
<div>The timer is set to go off <span class="difference"></span></div>
<div class="countdown"></div>
Technique 2 - Delta between intervals
var now = moment(); // new Date().getTime();
var then = moment().add(60, 'seconds'); // new Date(now + 60 * 1000);
$(".now").text(moment(now).format('h:mm:ss a'));
$(".then").text(moment(then).format('h:mm:ss a'));
$(".duration").text(moment(now).to(then));
var fps = 30;
var interval = 1000/fps;
var performanceTime = performance.now();
var performanceDelta;
(function updateCountdown(time) {
performanceDelta = time - performanceTime;
if (performanceDelta > interval) {
performanceTime = time - (performanceDelta % interval);
$(".difference").text(moment().to(then));
$(".countdown").text(countdown(then, null, countdown.YEARS | countdown.MONTHS | countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS | countdown.MILLISECONDS).toString());
}
requestAnimationFrame(updateCountdown);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<div>
The time is now: <span class="now"></span>, a timer will go off <span class="duration"></span> at <span class="then"></span>
</div>
<div>The timer is set to go off <span class="difference"></span></div>
<div class="countdown"></div>
Technique 3 - setInterval()
var now = moment(); // new Date().getTime();
var then = moment().add(60, 'seconds'); // new Date(now + 60 * 1000);
$(".now").text(moment(now).format('h:mm:ss a'));
$(".then").text(moment(then).format('h:mm:ss a'));
$(".duration").text(moment(now).to(then));
var fps = 30;
var interval = 1000/fps;
setInterval(function updateCountdown() {
$(".difference").text(moment().to(then));
$(".countdown").text(countdown(then, null, countdown.YEARS | countdown.MONTHS | countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS | countdown.MILLISECONDS).toString());
}, interval);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<div>
The time is now: <span class="now"></span>, a timer will go off <span class="duration"></span> at <span class="then"></span>
</div>
<div>The timer is set to go off <span class="difference"></span></div>
<div class="countdown"></div>
It would also be interesting to see a completely un-throttled version like so:
Technique 4 - No throttle
var now = moment(); // new Date().getTime();
var then = moment().add(60, 'seconds'); // new Date(now + 60 * 1000);
$(".now").text(moment(now).format('h:mm:ss a'));
$(".then").text(moment(then).format('h:mm:ss a'));
$(".duration").text(moment(now).to(then));
(function timerLoop() {
$(".difference").text(moment().to(then));
$(".countdown").text(countdown(then, null, countdown.YEARS | countdown.MONTHS | countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS | countdown.MILLISECONDS).toString());
requestAnimationFrame(timerLoop);
})();
// CountdownJS: http://countdownjs.org/
// MomentJS: http://momentjs.com/
// jQuery: https://jquery.com/
// Rawgit: http://rawgit.com/
// Light reading about the requestAnimationFrame pattern:
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
// https://css-tricks.com/using-requestanimationframe/
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<div>
The time is now: <span class="now"></span>, a timer will go off <span class="duration"></span> at <span class="then"></span>
</div>
<div>The timer is set to go off <span class="difference"></span></div>
<div class="countdown"></div>
Simply Put: How does one measure the CPU load difference between four similar javascript functions?
Does anyone already know which of these is going to be more performant? (I know that is not really a word)
Answering my own question:
The Short Answer:
Worst Performance
Clearly setInterval() is the worst solution. Because setInterval() still runs while you are not on the tab, wasting CPU and therefor battery life.
Best Animation (Microseconds)
Clearly the Delta Interval Math calculation method is the most smooth and most accurate way to calculate interval time. When you combined this algorithm with the accuracy of calculating frames times using performance.now() you can achieve results accurate to the microsecond with your animation frames.
(and yes, even requestAnimationFrame() uses performance.now() time as the first argument it passes to the callback function).
And yes folks, I really mean microseconds. That's 1s/1000ms/1000µs.
Go ahead, test it now. Open up your console and type: performance.now() And you'll get a number that looks like 2132438.165 - those are milliseconds since the browser rendered the first frame.
(Which is extra cool because µ is a greek character +10 nerd points)
Best CPU Performance (Milliseconds)
Combine requestAnimationFrame() (which allows your animation to sleep when you switch tabs) with setTimeout() which can throttle the FPS of your animation to any desired millisecond interval.
Keep in mind however, that the difference between this method and the Delta Interval Math method is very VERY slightly different. I don't even have a way to quantify how small of a difference it is. From what I can tell it might be one fourth to one eighth more efficient. But you lose a lot of smoothness for it. your choice.
The Long Answer:
I'm still looking forward to a better way to do this, perhaps in a way that allows me to compare data between different functions.
Until then, I was able to generate these images using Google's Javascript CPU Profiler
Listing in the order in which I believe they are performant, but with titles that match the original question:
Technique 3 - setInterval()
Technique 1 - setTimeout()
Technique 2 - Delta between intervals
Technique 4 - No throttle
Visual Analysis
Well, from the looks of it, I'd rank the different functions in this order of performance:
setInterval() function.
setTimeout() wrapping therequestAnimationFrame()` call.
Delta Interval Math inside the recursive function called by requestAnimationFrame()
No FPS Throttle simply looping with requestAnimationFrame()
Conclusion: [Edited: 06/25/2016]
The setInterval() function is better than any requestAnimationFrame() pattern that I have found at least for CPU usage reasons ONLY WHILE YOU ARE ON THE TAB.
So if CPU cost or longer battery life are the larger concern for your application, than go with requestAnimationFrame() and throttle the FPS using either:
The setTimeout() method which seams to be a little less work for the CPU (best of both worlds) - but admittedly less smooth than the method below.
or
The Delta Interval Math which seams to be a little bit more smooth of an animation (And using the technique outlines in this Question/Answer with the time from performance.now() and the time reported from the requestAnimationFrame() (which is just the current performance.now() provided in the first argument to the callback function). Because we're using the most accurate algorithm I've seen to calculate the animation frame (You're actually calculating down to the millionth of a second, or a microsecond 1s/1000ms/1000µs). There is not a HUGE difference in the CPU load from this technique and setTimeout() - but there IS a difference (reference the attached images)
Why is requestAnimationFrame() is the bomb-digity?" - Because: when you're not on that tab, it gets turned off by the browser, so your animations are "waiting" for you to come back. AND using performance.now() you're getting microsecond (µs) accuracy on your animation.
It is said that requestAnimationFrame() is an "optimized" way to make sure your animation works along side other browser redrawing so that your animation "fits" with what the browser is doing, it also comes at a 60FPS callback cost.
Steps I took to generate these photos:
Created individual blank HTML files with nothing but absolutely what I needed for the tests.
Rebooted my computer, opened only my chrome browser to an about:blank tab.
Opened each "test benchmark" HTML file I previously created individually and one at a time.
At precisely 50 seconds into the countdown timer I clicked start on Google's Javascript CPU Profiler and precisely 10 seconds later I clicked stop (I used a special clicking macro built into my gamer-mouse's special driver software that works pretty well - Once I click the button it clicks start and 10 seconds later another click on stop - good enough for these photos)
Saved the profile to my computer
Loaded each of the profiles into the profiler tool on the about:blank tab.
Resized the window to frame the data well
Screenshot [shift] + [cmd] + [4] and then you press space on the keyboard to frame the screenshot exactly around the window.
Unresolved Problem:
I still don't have a way to see what the CPU % usage is. This graph leave me wanting for something more detailed. The other Google Javascript CPU Profiler screens are also a little vague in this sense. Maybe I just don't know how to use the tool.
If anyone knows of a better benchmark for testing this, please send an answer over and I'll review it. I hope it's better than this mess. And thanks in advance.
The main issue here is having a way to quantify hard data from one CPU profile to another and compare them. This is what I'm missing the most.
I'm making a digital signage system and I'd like to sync the displays so that they all show the same screen at the same time. I'm thinking that the simplest way of doing this is using the current time as a marker - all the machines running the displays will have the accurate time, and the amount of slides they have will be the same.
Is there a calculation I could perform on the current time to work out which slide to display which could be used on each screen, with a slide display time of 30 seconds for example?
I have no experience working with this.
But speaking with a colleague whom has, he pointed me in the direction of Synchroscope.
Seems like the right way to approach it?
Hope it helps!
Synchroscope Guide
Thanks to Bergi's suggestion of using Modulo, I've found a solution. Here is my Javascript code that changes the screen/slide every 30 seconds:
var sec = Math.floor(Date.now() / 1000);
var nearest30Sec = Math.round(sec / 30);
var currentSlide = ((nearest30Sec - 1) % 10) + 1;
currentSlide will produce a number between 1 and 10, which will change every 30 seconds.
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 have made a countdown timer. It uses the date function to get the current time. Then it stores that time in another var. This new var gets changed hours/minutes/seconds, so the format should be the same as the date function.
Then I turn both variables into time since counting, in milliseconds.
Then I substract the current date from the new date thingy, to get the time difference from both variables in milli seconds. This should be the difference from the current time to the target time.
After this, I will turn the difference into a readable hours/minutes/seconds timeformat, which will be displayed in a div. Also added a piece of code for allowing an blinking countdown timer, which will give 5 minutes extra time if the timer has run out. (this countdown timer should be part of a larger script, doing things)
BIG PROBLEM IS: The timer works. Does everything I want it to do. But it's very laggy! It skips displaying seconds, even if I set the setTimeout to 10 ms. I also use a clock using the same timer set-up (different vars), and that clock doesn't skip any time, with a setTimeout of 1000 ms...
Tryed to make some calculations smaller, even read alot about the setTimeout and setInterval drift in javascript, but this doesn't explain my current problems. (using setTimeout for a chat, to reload messages every 500 ms, and that works like a charm so my computer/client/server can handle smaller then 1000 ms times)
Skipping seconds happens on IE and firefox. Other countdown timers (which don't do what I want them to do) also run fine in my browser. What's the problem here?!?
https://jsfiddle.net/77cnvq82/
function startMyFunction() {
setTimeout(myFunction, 100);
}
In this example, the speed has been set to 100ms
The actual issue is in your rounding and math, not in the display code itself.
If you change your display line to:
timerShowRemaining = timerShowRemaining+timerHours+":"+timerMinutes+":"+timerSeconds
+ (new Date());
It will display the current time and you'll see the seconds count up evenly, even as your calculated numbers jerk and lag.
I was using the following MySQL event to update the table with the (CURRENT_TIME)+5) every five min. however my plan is was to get the table updated with that time every full 5 min from current time:
e.g., on 12:05 it writes 12:10, on 12:10 it writes 12:15...
So I used to fire the below event at exactly 12:30:00 for example in order to get it accurate.
CREATE EVENT x_next
ON SCHEDULE EVERY 5 MINUTE
STARTS CURRENT_TIMESTAMP
DO
UPDATE data SET x_next= CONCAT(CONCAT(HOUR(CURRENT_TIME),':'),MINUTE(CURRENT_TIME)+5);
What I am looking now is to make it more accurate to make this event act like the following JSfiddle result where if the even started at any time it will update only on the next 5 min (snapped-to):
http://jsfiddle.net/v06jrobg/
Where the result should be what the event should update.
I am wondering if anyone had this experience before or any suggestions?
Try to define a start time instead of current_timestamp
CREATE EVENT x_next
ON SCHEDULE EVERY 5 MINUTE
STARTS '2014-10-08 12:00:00'
DO
UPDATE data SET x_next=
CONCAT(HOUR(DATE_ADD(Now(),INTERVAL +5 MINUTE)),':',
MINUTE(DATE_ADD(Now(),INTERVAL +5 MINUTE)));
This will start at 12:00:00 and execute every 5 minute.
I changed your update syntax a bit also. It makes sure that the hour is added with 5 minutes, in case at 16:55 , the next value is 17:00. I think this will give 17:0 and not 17:00, might have to fix a check for that. A bit hacky but it might do the trick?