AddEventListener Event calling multiple times

问题

I have a simple Cordova project with Angular Framework. I am using https://github.com/auctifera-josed/cordova-plugin-idynamo plugin to communicate with MagTek device. I am listening to the 'magtekEvent' on load of a particular screen to capture the data. Every time I go to other screen and come back to this screen I can see the event is triggering multiple times based on the number of time I visit this screen. I tried removing the event but nothing happened. Can anyone help me on how to stop this event when I go to other screen or when I close this device.

I added a log inside plugin file and found the plugin is triggering the event only once and I hope it can be fixed using JS itself.

Below is the code snippet:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ROUTER } from "src/app/config/constants";
import { Router, Event } from "@angular/router";
import { SharedDataService } from "./shared-data.service";
declare var magtek: any;

@Component({
  selector: 'app-mag-tek-testing',
  templateUrl: './mag-tek-testing.component.html',
  styleUrls: ['./mag-tek-testing.component.scss']
})
export class MagTekTestingComponent implements OnInit, OnDestroy {

  public deviceStatus = "";
  public cardData = "";
  public initRes;
  public openRes;

  constructor(
    public router: Router,
    public sharedDataService: SharedDataService,
  ) { }

  ngOnInit() {
    if (this.sharedDataService.isIOS) {
      this.initMagTekAndListen();
    }
  }

  public backToSearch() {
    this.router.navigate(['']);
  }

  public initMagTekAndListen() {
    document.addEventListener("deviceready", () => {
      magtek.init(function (err, res) { });
      this.openRes = function (res) { }
      magtek.openDevice(this.openRes, this.openRes);
      this.listenMagTekDevice();
    }, false);

  }

  public ngOnDestroy() {
    //Closing the device saves battery live
    if (this.sharedDataService.isIOS) {
      document.addEventListener("deviceready", () => {
        magtek.closeDevice(this.openRes, this.openRes);
      }, false);
    }
  }

  public listenMagTekDevice() {
    window.addEventListener('magtekEvent', (e: any) => {
      switch (e.dataType) {
        case 'onDeviceConnectionDidChange':
          alert(e.data);
          this.deviceStatus = e.data;
          break;
        case 'onDataReceived':
          alert(JSON.stringify(e.data));
          this.cardData = JSON.stringify(e.data);
          break;
        default:
          console.log(e);
      }
    }, true);
  }

  public closeConnection() {
    window.removeEventListener('magtekEvent', () => {
      alert("remove");
    }, true);
    magtek.closeDevice(this.openRes, this.openRes);
  }
}

回答1:

In order to deregister an event listener you need to pass exactly the same handler function that was used on the event listener registration.

So you can try to turn the event handler into a named function:

function magtekEventHandler (e: any) {
  switch (e.dataType) {
    case 'onDeviceConnectionDidChange':
      alert(e.data);
      this.deviceStatus = e.data;
      break;
    case 'onDataReceived':
      alert(JSON.stringify(e.data));
      this.cardData = JSON.stringify(e.data);
      break;
    default:
      console.log(e);
  }
}

And use this function during the listener registration/deregistration:

window.addEventListener('magtekEvent', magtekEventHandler, true);
window.removeEventListener('magtekEvent', magtekEventHandler, true);

来源：https://stackoverflow.com/questions/63189460/addeventlistener-event-calling-multiple-times

标签

javascript

angular

cordova

addeventlistener

removeeventlistener