Optimised event listener function using requestAnimationFrame
.
Since resize/scroll events etc. can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame.
npm i optimised-eventlistener
To add an event listener to the resize event:
import optimisedEventlistener from 'optimised-eventlistener'
function myOnResize() {
console.log('on resize called')
}
optimisedEventlistener.add('resize', () => {
myOnResize()
})
// to remove the resize listener call .clear()
optimisedEventlistener.clear('resize')
If you wanted to add an event listener to the scroll event pass in 'scroll' instead:
import optimisedEventlistener from 'optimised-eventlistener'
function handleScroll() {
console.log('on scroll')
}
optimisedEventlistener.add('scroll', () => {
handleScroll()
})