Already wrote a debounce function (:

This commit is contained in:
arne 2024-03-25 08:02:25 +01:00
commit 0d224823cc

View file

@ -47,7 +47,7 @@ const makeRipple = (position: [number, number], radius: number): void => {
// event handlers
const throttle = <X, Y>(fn: (...x: X[]) => Y, ms: number) => {
const debounce = <X, Y>(fn: (...x: X[]) => Y, ms: number) => {
let lastExecutedAt = -1
return (...x: X[]) => {
const now = Date.now()
@ -58,7 +58,7 @@ const throttle = <X, Y>(fn: (...x: X[]) => Y, ms: number) => {
}
}
const at60fps = <X, Y>(fn: (...x: X[]) => Y) => throttle(fn, 1000 / 60)
const at60fps = <X, Y>(fn: (...x: X[]) => Y) => debounce(fn, 1000 / 60)
// create a big ripple when touching the screen
canvas.addEventListener('mousedown', at60fps((e) => {
@ -191,17 +191,6 @@ document.addEventListener('DOMContentLoaded', () => {
loop()
})
const debounce = (fn: Function, ms: number) => {
let prev = 0
return (...args: any[]) => {
const now = Date.now()
if (now - prev > ms) {
fn.apply(null, args)
prev = now
}
}
}
window.addEventListener('resize', debounce(() => {
ctx.canvas.width = window.innerWidth
ctx.canvas.height = window.innerHeight