I listened to @keith, stopped optimizing for what didn’t matter, decided to focus on solving an actual problem: autobinding, aka My Nemesis.
When a user set the Tiptap plugin to autobinding, it would start behaving erratically. It would get worse with multiple Tiptaps on a single page. I tried both a poor-man’s debounce function and raw-dogging it. Those didn’t work. Then I found this pretty boy singing the praises of throttling. Naturally, I copied-pasta’ed his code. It worked!
Why and how it works:
Putting it out there so you guys can poke holes at this mess and – hopefully – someone else can benefit from it.
// throttle function: to take it easy on the autobinding.
// 1. writes to autobinding
// 2. then waits a certain delay
// 3. then writes again if the user generated more changes
// source: from https://blog.webdevsimplified.com/2022-03/debounce-vs-throttle/code
instance.data.throttle = (callback, delay = 1000) => {
instance.data.shouldWait = false
instance.data.timeoutFunc = () => {
if (instance.data.waitingArgs == null) {
instance.data.shouldWait = false
} else {
callback(...instance.data.waitingArgs)
instance.data.waitingArgs = null
setTimeout(instance.data.timeoutFunc, delay)
}
}
return (...args) => {
if (instance.data.shouldWait) {
instance.data.waitingArgs = args
return
}
callback(...args)
instance.data.shouldWait = true
setTimeout(instance.data.timeoutFunc, delay)
}
}
FYI, this is how I implement it in Tiptap:
instance.data.writeToAutobinding = instance.data.throttle(() => {
instance.publishAutobinding(instance.data.editor.getHTML());
}, 2000);