-
-
Save jakearchibald/cb03f15670817001b1157e62a076fe95 to your computer and use it in GitHub Desktop.
export function animationInterval(ms, signal, callback) { | |
// Prefer currentTime, as it'll better sync animtions queued in the | |
// same frame, but if it isn't supported, performance.now() is fine. | |
const start = document.timeline ? document.timeline.currentTime : performance.now(); | |
function frame(time) { | |
if (signal.aborted) return; | |
callback(time); | |
scheduleFrame(time); | |
} | |
function scheduleFrame(time) { | |
const elapsed = time - start; | |
const roundedElapsed = Math.round(elapsed / ms) * ms; | |
const targetNext = start + roundedElapsed + ms; | |
const delay = targetNext - performance.now(); | |
setTimeout(() => requestAnimationFrame(frame), delay); | |
} | |
scheduleFrame(start); | |
} |
// Usage | |
import { animationInterval } from './1.js'; | |
const controller = new AbortController(); | |
// Create an animation callback every second: | |
animationInterval(1000, controller.signal, time => { | |
console.log('tick!', time); | |
}); | |
// And to stop it: | |
controller.abort(); |
I am new to these core JS features can someone help me understand what exactly is a AbortController and controller.signal does?
Or at least provide a resource to learn Thanks
@mfbx9da4 Thanks for the React hooks version! Just ran into a subtle bug with it that might be worth flagging:
animationInterval(ms, controller.signal, callbackRef.current)
Here the current callbackRef
is passed by reference to animationInterval
, so animationInterval
will keep using the callback that was current
when it was called, rather than updating when the ref changes as desired.
To ensure the latest callback is always used, we can call the current
ref like this instead:
animationInterval(ms, controller.signal, (time) => callbackRef.current(time))
Ooo great point - good catch! Will update
I was wondering how Jake's function could be modified such that it could run in the background
still have issue of double frame
so if I just want the counter for second level precision, I just need set setInterval delay
less than 1000ms, should be working fine?
const start = Date.now();
setInterval(() => {
const gaps = (Date.now() - start);
const seconds = Math.floor(gaps / 1000);
updateUI(seconds)
}, 900); // change less than 1000ms
yeah finally I did it like this
Is this gist something i can use to create a countdown timer with? like to a specific date. Or would this not be for something like that?
@zizifn no, that still drifts. That's why the code in this gist is more complicated.
this is my typescript version of it @mfbx9da4