Already wrote a debounce function (:
This commit is contained in:
parent
854c975cd0
commit
0d224823cc
1 changed files with 2 additions and 13 deletions
|
|
@ -47,7 +47,7 @@ const makeRipple = (position: [number, number], radius: number): void => {
|
||||||
|
|
||||||
// event handlers
|
// 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
|
let lastExecutedAt = -1
|
||||||
return (...x: X[]) => {
|
return (...x: X[]) => {
|
||||||
const now = Date.now()
|
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
|
// create a big ripple when touching the screen
|
||||||
canvas.addEventListener('mousedown', at60fps((e) => {
|
canvas.addEventListener('mousedown', at60fps((e) => {
|
||||||
|
|
@ -191,17 +191,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
loop()
|
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(() => {
|
window.addEventListener('resize', debounce(() => {
|
||||||
ctx.canvas.width = window.innerWidth
|
ctx.canvas.width = window.innerWidth
|
||||||
ctx.canvas.height = window.innerHeight
|
ctx.canvas.height = window.innerHeight
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue