Photo by Jp Valery on Unsplash
This short Q&A on setTimeout() hopes to lead you into writing your own debouncers & throttlers -- handy tools for treating repeated events that happen across short periods of time as a single event.
Debouncing:
Time : - - --> - - --> - - --> -
Key-presses : X X X X X X X X X
Events : O O
Throttling:
Time : - - --> - - --> - - --> -
Key-presses : X X X X X X X X X
Events : O O O
All code below assumes the following header:
const seconds = n => n * 1000
const log = x => console.log(`hello, ${x}`)
So, the question is:
"At the end of each run, what will be logged to the console?" 🤔
1. setTimeout / clearTimeout
let id
function run() {
id = setTimeout(log, seconds(1), 'world')
}
function clear() {
clearTimeout(id)
}
// 1a)
run()
// What will be logged?
// 1b)
run()
clear()
// What will be logged?
2. runAfter
function runAfter(ms, fn, ...args) {
const id = setTimeout(fn, ms, ...args)
return () => clearTimeout(id)
}
// 2)
const clear = runAfter(
seconds(1),
() => log('world')
)
clear()
// What will be logged?
3. RunAfter
function RunAfter(ms, fn) {
let id
const clear = () => clearTimeout(id)
const run = (...args) => {
id = setTimeout(fn, ms, ...args)
}
return [run, clear]
}
const [run, clear] = RunAfter(
seconds(1),
() => log('world')
)
// 3)
run()
// What will be logged?
4. makeDebouncer
function makeDebouncer(ms, fn) {
const [run, clear] = RunAfter(ms, fn)
const debouncer = (...args) => (
clear(), run(...args)
)
return [debouncer, clear]
}
const [run, clear] = makeDebouncer(
seconds(1),
() => log('world')
)
// 4)
run()
run()
run()
// What will be logged?
5. makeThrottler
function makeThrottler(ms, fn) {
let canRun = true
const [run, clear] = RunAfter(ms, reset)
return [throttler, reset]
function throttler(...args) {
if (!canRun) return
canRun = false
run()
fn(...args)
}
function reset() {
clear()
canRun = true
}
}
const [run, clear] = makeThrottler(
seconds(1),
() => log('world')
)
// 5)
run()
run()
run()
clear()
// What will be logged?
If you need a little help, I made a corresponding interactive version of the article that offers some very basic visuals.
I'm not sure if they help intuit what's going on, but they give the answers at least! Did they meet your expectations?
Top comments (0)