JavaScript counters the hard way - HTTP 203 

Hey, you cared enough to scroll down to the comments! At this point you might as well subscribe.

Taking simple things and making them complicated - exactly why I'm here. I don't just want to get stuff done. I want to get it done right, and understand why it's right 👍 Kudos for making such excellent content!

Wow -- next level. Performance.now() and document.timeline.currentTime *seem* to refer to the same thing --- time since document loading -- but they are....slightly different. Different enough to be used distinctly (non-interchangeably) within your code. Jake describes document.timeline.currentTime as "like performance.now(), *but* [is] the time of the current *frame*." What is this distinction, exactly? I can't any reference to frames in MDN documentation for document.timelines ....

You might not be getting the billions of views, but the videos you do make are always great!

If I ever get asked to implement a counter during a job interview I'm hitting them with this bad boy.

This is the only channel, where a seasoned javascript developer can still learn something in a basic counter tutorial. Very well done, and so incredibly informative.

Thanks for complicating. Without it, I wouldn't have known about CSS steps() function being a thing.

Beginners tutorial: how to build a counter Advanced tutorial: how to (not?) build a counter

Fun fact: you can clear a setInterval using clearTimeout. Because, as Surma said, setInterval is literally setTimeout that schedules itself.

11:54 Nitpick: Technically the `%` operator is the "remainder" operator - not *modulo* tc39.es/ecma262/#sec-numeric-types-number-remainder The _remainder_ operator calculates the remainder of division rounded towards *zero*, i.e.: dividend - divisor * Math.trunc(dividend / divisor); _modulo_ calculates the remainder of division rounded towards *negative infinity*, i.e.: dividend - divisor * Math.floor(dividend / divisor) Both produce identical results when both operands have the same sign but produce different results when the operands have different signs. const modulo = (dividend, divisor) => ((dividend % divisor) + divisor) % divisor; const tests = [ { dividend: 5, divisor: 3, mod: 2, rem: 2 }, { dividend: 5, divisor: -3, mod: -1, rem: 2 }, { dividend: -5, divisor: 3, mod: 1, rem: -2 }, { dividend: -5, divisor: -3, mod: -2, rem: -2 }, ]; for (const { dividend, divisor, mod, rem } of tests) { console.assert( dividend % divisor === rem, `${dividend} % ${divisor} is not ${rem}` ); console.assert( modulo(dividend, divisor) === mod, `${dividend} mod ${divisor} is not ${mod}` ); } So in this use case it doesn't matter but when you're doing "clock arithmetic" you want *modulo*, not remainder.

@Jake Archibald, Great episode. Thank you so much for making things complicated ;). Please make a video on how you debug things behind the scene. How do you approach this kind of issue. I think everyone wants to see the pain went behind the scene as well.

Now I know how should I build a counter. Thank you.

This is super helpful for me! I've been working on a web player for a proprietary bitmap animation format from a Nintendo DS app, and getting the frames to render at the right interval has been a really annoying challenge for me. Gonna give this a whirl!

Hey Jake Please put more time in explaining what code is written, would be more helpful then Loved the video, thanks

Hey, thanks for the explanation, I never know about document timeline :)

Thank you for this!

As a developer who has written a lot of css animations... I can confirm they're pretty wonky.

My usual 10 min morning coffee got extended to 24:08. Riveting geekery 👍

Why would anyone dislike it

Great video, thoroughly enjoy these scenic-route explanations.

I ended up with a similar solution when I needed a way to schedule cron-like actions on a website (some run every second, some at 8pm every day, some every hour, etc) github.com/creationix/family-dash/blob/main/modules/schedule.js

You guys are great presenters, and provide tremendous value with your videos. Big thank you

I learned so much about document.timeline. thanks for the complication!

I was wrapping my head around where time arg comes from. It turns out it's passed by raf - "passed a single argument, a DOMHighResTimeStamp, which indicates the current time"

My favorite RU-vid channel! Love you guys

This is exactly why I stay away from the front-end

Oh danm, I got to know this program last epsode, but I'm confident in saying that's one of the best shows/video series I've seen in a long while. Better than the shows I've been watching on netflix, but probably that on my poor ability to choose series ahha

The requestAnimationFrame example could be improved...the animation frame callback gets a timestamp given to it, so you can use that in place of date.now()

I actually really loved this. Where to learn complex stuff better than in simple problems. Also: never heard of steps in CSS before, thanks for that, too :)

I literally hate Chrome timing. Implementing JSMoo, a currently 4-system emulator, getting timing to happen in any consistent way is a serious challenge.

Can't help but think this should be renamed "How to implement the tag". The counting part is not really relevant to the video and excellent insights.

Is there an example why RU-vids counter on ads are wrong and take 1 extra second 🤷‍♂️ yeah I notice...

I ran into these issues and had to figure them out while I was making a drum machine. Wish I'd had this video to hand back then :D. Even if your eyes would never detect the drift you can definitely hear it, especially when it's inconsistent.

What did you mean by the "double wrath"? (16:23)

Good work digging there and SAVE CPU WHENEVER YOU CAN!

This is the hardest thing to do with a seemingly simple task I've ever seen, congratulations. I loved it

❤️🤓 thank you guys, this is premium web-nerd food 🍱

Great episode. Enjoyed watching

This is gold

Very clever solution with targetNext.

That intro segment is exactly why I watch these videos XD

I'm the billionth viewer

Thanks for the great videos..

Thank you for this rich content!

although not pulling in millions of views, these videos are gold for the more experienced developer that wants still wants to learn something new. and the teaching style is great. it never feels like im learning, rather im discovering a topic with the both of you

currentTime seems nice. I used to combine the elapsed time calculated with Date.now in setTimeout with requestAnimationFrame and tried to hit the next true second elapsing. So far this works perfectly fine for me and doesn't show any drift. Now I would wonder what happens if NTP syncs time throughout the timer running.. I remember that double hit with setTimeout and I also remember that I solved it. I should re read through my timer code.. I'm confident about it. I made it like.. 10 years ago before requestAnimationFrame existed and extended it with requestAnimationFrame as soon as it shipped xD Ok a quick look led me there: let timeout = now % 1000; timeout = timeout !== 0 ? 1000 - timeout : 1000;

Regarding Chrome's rAF bug I did open crbug.com/1018120 you might want to check. Also, an other mean to have a timer is to use the Web Audio API and its AudioScheduledSourceNode. These won't tick the "Avoids running in background" case, but on the contrary they'll prevent the browser from throttling the tab's timers at all. So not great for the trees, though I didn't measure overall CPU usage, but in some cases (e.g stackoverflow.com/questions/40687010/40691112#40691112 ), we want our code to run no matter what.

But what if we schedule the frame function in the video.requestVideoFrameCallback method on a looped, 1 frame per second and 1x1 resolution video?

Interesting!

I don't believe I've watched that

Nice show with nice actors, but there are not so many people in the world who understand so sophisticated techniques. Unless you change the subject, you will not attract a million of viewers.

Is this a GameOfThrones Whiskey on the background?))

Great episode, thanks! One thing that I think is wrong in the last solution is that it does not account for some browsers (safari) rounding performance.now() so it can actually be smaller than requestAnimationFrame argument. So the scheduling is not great, but rounding will take care of this.

I always enjoy your tinkering videos!

Well done! Another mind-blowing episode

What is your recommendation to handle longer timeouts that would be handled well over computer sleep? As an example, one minute timeout/interval to show time (hours and minutes) does not work very well over sleep.

Excellent, thorough assessment of problems implementing time accuracy for js animation

I like this video concept.

Making simple things hard - is the best of this channel)) because it is our frontend life, here is absolutely no simple things, but LOTS of details!

Just curious...what earphones are you guys using? ...and microphones

Thanksssssssa

Wow! Excellent interview question. So many gotchas. I liked the way you presented the drift. Thanks for teaching us something new. How did you benchmark the CPU usage for each approach though? Is fair to say high CPU usage => high main thread usage for rAF, body.animate and CSS keyframes approaches?

is there a way to stop it without AbortController?

I did a similar kind of optimization when I wrote a FPS calculation library, it tried to predict when the next update should happen and bails all the calculations prematurely to save CPU making it a simple conditional integer branch. But in my case the scheduling mechanism is up to the consumer. github.com/victornpb/micro-fps

No other series on web development will make you so sad to be a web developer. Guaranteed!

this was just amazing. Thank you guys

javascript is a language that you can only learn how to count in 24min

Lol I used to do the basic thing of checking the difference of setTimeouts and the date time and calling it a day. Then I started using millisecond level clocks and stopped caring :D

so great thanks

Seems to me the spec is wrong and was designed very lazily.

love ya guys!

How come Houdini didn’t come up in this chat?

Fascinating!

I do not quite understand how that is supposed to work consistently. Can't you still get too much drift from setTimeout? E.g. going from underlying time difference of 16.4999 to 17.5001, yielding a jump in the UI from 16 to 18. I actually implemented a countdown just a few weeks ago. I think i settled for using a time difference while updating the UI a few times every second, but not every frame. So when the drift hits a boundary you get one interval that is slightly off but no numbers are skipped.

This should be the video that auto plays after every js counter tutorial.

Thats good job google

Love this one!!

Thank you

I feel like using `document.timeline` should immediately disqualify this as the "right" solution given that it's still in working draft, regardless if browsers technically implement it or not.

Count efficiently!!!

สวัสดีครับ

Can you send us the article of Paul Luis who says setinterval is bad. I want to see what he uses instead. We want to redo all of our timers in the app as it’s causing too much of a slowdown for other things

thanks a lot for first Q answer => it's true

Well done.

What if you simply took the negative deltas and made them zero? (thus avoiding the double-render)

How did you got to know about drift??

I like complicated stuff. So thanks. :)

Amazing!

Thank you for doing the deep work

Surprised safari is the one to have those optimizations. I just wish they also kept up with implementing new js/css features 😅

When did Chrome stop drifting? Or is it CPU architecture dependant? I ran into this trying to work on an embedded ARM system with Chromium and it started to drift really badly after a few weeks of running. Ended up using an external process for the events and just taking into account the delay in communication.

This was BRILLIANT! :)

I just need to know what the in-ear monitors you're both using are...

What about a simple requestAnimationFrame loop where you floor the time every time, but only update the UI if it's floored value changed?

Time to refactor all my timers!

I can't help but wonder if some of the code was inspired by a StackOverflow post that I participated in.

In "real" schedulers you generally have both a "run after/delay by" function and a "run at/delay until" function. Does JS / DOM need the latter? There's still a teeny inaccuracy between the now when you call setTimeout and when it actually executes, which might be important to someone, I guess.

Since you are talking about animation, It would be interesting if you explain how requestAnimationFrame can be used with canvas in an worker thread.

🤯

I really want to know if step easing in the css solution would have avoided the CPU usage issue