javascript - AddEventListener 事件多次调用
问题描述
我有一个带有 Angular 框架的简单 Cordova 项目。我正在使用https://github.com/auctifera-josed/cordova-plugin-idynamo插件与 MagTek 设备进行通信。我正在收听'magtekEvent'
特定屏幕的负载以捕获数据。每次我转到其他屏幕并返回此屏幕时,我都可以看到该事件根据我访问此屏幕的次数多次触发。我尝试删除该事件,但没有任何反应。当我转到其他屏幕或关闭此设备时,任何人都可以帮助我如何停止此事件。
我在插件文件中添加了一个日志,发现插件只触发了一次事件,我希望可以使用 JS 本身修复它。
下面是代码片段:
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);
}
}
解决方案
为了取消注册事件侦听器,您需要传递与事件侦听器注册完全相同的处理函数。
所以你可以尝试将事件处理程序变成一个命名函数:
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);
}
}
并在侦听器注册/注销期间使用此功能:
window.addEventListener('magtekEvent', magtekEventHandler, true);
window.removeEventListener('magtekEvent', magtekEventHandler, true);
推荐阅读
- java - IllegalArgumentException:org.hibernate.hql.internal.ast.QuerySyntaxException:ClassName 未映射
- javascript - 如何使用 React Router DOM 创建列表和详细视图?
- angular - Angular:导出到 CSV 时出现问题,带有“-”值的字段转换为日期
- java - Java FlightRecorder 不能与 JDK 11 一起使用?
- javascript - RestException [错误]:请求过多状态:429,代码:20429,
- php - php中的GBG Id扫描Api
- ruby-on-rails - 未定义的方法 in_rendering_context
- python - 我正在尝试刮两套
数据:一个有一个没有,有没有办法排除选择?
- html - 为什么我的容器 div 的高度比里面的图像高?
- vulkan - Vulkan计算重心坐标?面积函数是 2D 还是 3D?