-
-
Save beaucharman/1f93fdd7c72860736643d1ab274fee1a to your computer and use it in GitHub Desktop.
function debounce(callback, wait, immediate = false) { | |
let timeout = null | |
return function() { | |
const callNow = immediate && !timeout | |
const next = () => callback.apply(this, arguments) | |
clearTimeout(timeout) | |
timeout = setTimeout(next, wait) | |
if (callNow) { | |
next() | |
} | |
} | |
} | |
/** | |
* Normal event | |
* event | | | | |
* time ---------------- | |
* callback | | | | |
* | |
* Call log only when it's been 100ms since the last sroll | |
* scroll | | | | |
* time ---------------- | |
* callback | | | |
* |100| |100| | |
*/ | |
const handleScroll = debounce((arg, event) => { | |
console.log(`${arg} ${event.type}`) | |
}, 100, true) | |
window.addEventListener('scroll', (event) => { | |
handleScroll('Event is:', event) | |
}) |
Works great! Thank you!
@jpenney1 I understand your example completely and I've tested my debounce function with your example, which works fine too. But I found a specific case on Reddit which your function fails.
Case:
const obj = { name: 'foo', sayMyName() { console.log('My name is', this.name) } } obj.sayMyName() //-> My name is foo obj.deb = debounce(obj.sayMyName, 1000) obj.deb() // Should log -> My name is fooWith your function,
obj
is not binded to your callback and will returnMy name is
. So unless I explicitly bind the function:obj.deb = debounce(obj.sayMyName.bind(obj), 1000) obj.deb()This will now log correctly. But the problem is that the explicit binding is somewhat unnatural, and the debounce function should handle it automatically for us.
With my function however, it logs correctly even without the explicit binding, outputtingMy name is foo
.I've done some extensive testing and so far only this test case had me scratching my head. I hope i'm not missing anything out here.
Cheers!
This help me a lot.
@jpenney1 I understand your example completely and I've tested my debounce function with your example, which works fine too. But I found a specific case on Reddit which your function fails.
Case:
With your function,
obj
is not binded to your callback and will returnMy name is
. So unless I explicitly bind the function:This will now log correctly. But the problem is that the explicit binding is somewhat unnatural, and the debounce function should handle it automatically for us.
With my function however, it logs correctly even without the explicit binding, outputting
My name is foo
.I've done some extensive testing and so far only this test case had me scratching my head. I hope i'm not missing anything out here.
Cheers!