Skip to content

Instantly share code, notes, and snippets.

@barraponto
Last active April 3, 2024 11:17
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save barraponto/4547ef5718fd2d31e5cdcafef0208096 to your computer and use it in GitHub Desktop.
Save barraponto/4547ef5718fd2d31e5cdcafef0208096 to your computer and use it in GitHub Desktop.
ES6+ event-based browser idle timer.
const DOCUMENT_EVENTS = [
'mousemove', 'mousedown', 'click',
'touchmove', 'touchstart', 'touchend',
'keydown', 'keypress'
];
export class IdleTimer {
constructor(onIdleTimeout, timeout) {
this.onIdleTimeout = onIdleTimeout;
this.timeout = timeout;
this.timer = null;
this.active = false;
this.resetTimer = this.resetTimer.bind(this);
}
activate() {
if (!this.active) { this.bindEvents(); }
this.timer = setTimeout(this.onIdleTimeout, this.timeout);
this.active = true;
}
deactivate() {
if (this.active) { this.unbindEvents(); }
clearInterval(this.timer);
this.active = false;
}
resetTimer() {
clearInterval(this.timer);
this.activate();
}
bindEvents() {
window.addEventListener(
'scroll', this.resetTimer, { capture: true, passive: true});
window.addEventListener('load', this.resetTimer);
DOCUMENT_EVENTS.forEach(
eventType => document.addEventListener(eventType, this.resetTimer));
}
unbindEvents() {
// remove only checks capture
window.removeEventListener( 'scroll', this.resetTimer, { capture: true });
window.removeEventListener('load', this.resetTimer);
DOCUMENT_EVENTS.forEach(
eventType => document.removeEventListener(eventType, this.resetTimer));
}
}
@Romick2005
Copy link

How about adding capture phase as true? Smth like document.addEventListener(eventType, this.resetTimer, true)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment