Remove or destroy event listener

Question

working on angular2 application. I have RxJS timer instance that will push notification to user when used logged in. But it should not push notification if tab is not active then scheduler should pause/stop. It is also done.

But main thing is that I have added that window (focus, blur )event listener to ngOnInit(). I have tried to destroy it on ngOnDestroy() when we change page/component but though also it does not stop. When we came back to same page then second instance also started of that listener and there will be 2 scheduler instance now in my memory/scope.

So anyone have idea that how to remove/destroy window.listener on ngOnDestroy or any other place !

Code:

timerFlag: boolean = true;
private timer;
private sub: Subscription;

ngOnInit() {
    this.sub = null;
    this.timer = null;
    console.log("home-init");
    window.addEventListener('blur', this.disableTimer.bind(this), false);
    window.addEventListener('focus', this.initializeTimer.bind(this), false);
}
disableTimer() {
    if (this.sub !== undefined && this.sub != null) {
        this.sub.unsubscribe();
        this.timer = null;
    }
}
initializeTimer() {
    if (this.timerFlag) {
        if (this.timer == null) {
            this.timer = Observable.timer(2000, 5000);
            this.sub = this.timer.subscribe(t => this.runMe());
        }
    }
}
runMe() {
    console.log("notification called : " + new Date());
}
ngOnDestroy() {
    console.log("Destroy timer");
    this.sub.unsubscribe();
    this.timer = null;
    this.sub = undefined;
    this.timerFlag = false;
    window.removeEventListener('blur', this.disableTimer.bind(this), false);
    window.removeEventListener('focus', this.initializeTimer.bind(this), false);
}

can anyone guide me how to destroy event listener instance so that when I come to same page next time no second instance will start.

I have tried to remove listener in ngOnInit as well before start of window listener.

Possible duplicate of [JavaScript: remove event listener](http://stackoverflow.com/questions/4402287/javascript-remove-event-listener) — , Dec 08 '16 at 05:07
The listener being removed must be **identical** (in the `===` sense) to the one added. `this.disabletimer.bind(this)` is **not** identical when you call it twice. By the way, this has nothing to do with Angular. It's a pure JS issue. — , Dec 08 '16 at 05:08
Yes, as the duplicate question suggests, store the listener in a variable, then remove it using that variable. — , Dec 08 '16 at 05:21
in duplicate question link, which answer to follow ! can you guide me on that ! — user3145373 ツ, Dec 08 '16 at 05:23
You could also look at http://stackoverflow.com/questions/4950115/removeeventlistener-on-anonymous-functions-in-javascript. — , Dec 08 '16 at 05:26

score 15 · Accepted Answer · edited May 23 '17 at 12:25

15

1) I guess this should work:

ngOnInit() {
  window.addEventListener('blur', this.disableTimer, false);
  window.addEventListener('focus', this.initializeTimer, false);
}

disableTimer = () => { // arrow function
  ...
}
initializeTimer = () => { // arrow function
  ... 
}

ngOnDestroy() {
  window.removeEventListener('blur', this.disableTimer, false);
  window.removeEventListener('focus', this.initializeTimer, false);
}

Plunker Example

2) Another way is to store your listener in variable because .bind returns new function every time

disableTimerFn: EventListenerOrEventListenerObject;

ngOnInit() {
  this.disableTimerFn = this.disableTimer.bind(this);
  window.addEventListener('blur', this.disableTimerFn, false); 
}

ngOnDestroy() {
  window.removeEventListener('blur', this.disableTimerFn, false);
}

Plunker Example

3) But maybe is the best way is to use angular2 way:

@HostListener('window:blur', ['$event'])
disableTimer (event) { ... }

It will be automatically removed when component will be destroyed

Plunker Example

4) One more angular2 way is using Renderer

globalListenFunc: Function;
constructor(private renderer: Renderer) { }
ngOnInit() {
  this.globalListenFunc = this.renderer.listenGlobal('window', 'click', this.onClick.bind(this))
}

onClick() {
  alert('click');
}

ngOnDestroy() {
  this.globalListenFunc(); // destroy listener
}

Plunker Example

See also

Dynamically add event listener in Angular 2

edited May 23 '17 at 12:25

Community

1
1

answered Dec 08 '16 at 05:30

yurzui

205,937
32
433
399

how can I store it in variable ? – user3145373 ツ Dec 08 '16 at 05:32
when I use your code, my component level private members shows me undefined, I think that is due to I have to bind it. Any solution ? – user3145373 ツ Dec 08 '16 at 05:34
for second way when I am removing listener, it tolds me that can not use argument of type Function ... Any suggestion please ? – user3145373 ツ Dec 08 '16 at 05:43
Try to change Function to EventListenerOrEventListenerObject – yurzui Dec 08 '16 at 05:45
for first option I have all component level members are undefined inside function. – user3145373 ツ Dec 08 '16 at 05:46
Can you reproduce it here https://plnkr.co/edit/cgUVJ4ahMszmNa8h6d5o?p=preview? I've added `prop1` property to component – yurzui Dec 08 '16 at 05:48
second way working fine but when I visit another page then its works fine but when I visit to my page again then focus does not call it calls when I blur then focus.. – user3145373 ツ Dec 08 '16 at 05:52
Try to set `debugger` inside ngOnInit and observe it when you're walking between page – yurzui Dec 08 '16 at 05:58
hello I have tried third way as well but when I redirect to another page timer does not stop. shall I have to do anything in `ngOnDestroy` ? – user3145373 ツ Dec 08 '16 at 05:59
hello after adding that unsubscribe code inside my destroy, it works fine.. thanks – user3145373 ツ Dec 08 '16 at 06:01
It means that your component isn't destroyed. In my example as you can see it is automatically destroyed. I don't know how your routing looks like – yurzui Dec 08 '16 at 06:02
`+1` for all these options... which is the best way ? but still getting same issue that when I redirect from another page to this.. it does not work.. I have to blur and focus again then only it starts. – user3145373 ツ Dec 08 '16 at 06:02
The best ways are 3 and 4. – yurzui Dec 08 '16 at 06:03
Please provide plunker that demonstrates your problem. Hard to tell what is the issues without seen a working example – yurzui Dec 08 '16 at 06:05
my ngInit called when I come from another page but focus does not called ! any idea.. going with 3rd options. – user3145373 ツ Dec 08 '16 at 06:05
finally gone with option 3 and have some issues but will rectify and fix it.. thanks.. – user3145373 ツ Dec 08 '16 at 06:39
hello, can I call `HostListener` on page load as well ? – user3145373 ツ Dec 08 '16 at 08:55

Remove or destroy event listener

1 Answers1

Linked