AddEventListener事件多次调用 [英] AddEventListener Event calling multiple times

问题描述

我有一个使用Angular Framework的简单Cordova项目.我正在使用 https://github.com/auctifera-josed/cordova-plugin-idynamo 插件可与MagTek设备通信.我正在听特定屏幕上的'magtekEvent'来捕获数据.每次我转到其他屏幕并返回此屏幕时，根据我访问此屏幕的次数，我可以看到事件触发了多次.我尝试删除该事件，但没有任何反应.当我转到其他屏幕或关闭此设备时，有人可以帮助我如何停止此事件.

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.

我在插件文件中添加了一个日志，发现该插件仅触发一次事件，我希望可以使用JS本身对其进行修复.

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.

下面是代码段:

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);
  }
}

推荐答案

要注销事件监听器，您需要传递与事件监听器注册时完全相同的处理函数.

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);

这篇关于AddEventListener事件多次调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！