// Create an animation callback every second:
const stopInterval = animationInterval(1000, function (time) {
console.count('Timer')
})
// And to stop it:
stopInterval()Source: https://gist.github.com/jakearchibald/cb03f15670817001b1157e62a076fe95
| export function animationInterval (ms, callback) { | |
| const controller = new AbortController() | |
| const signal = controller.signal | |
| // 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) | |
| return () => { | |
| controller.abort() | |
| } | |
| } |