How to prevent an addeventlistener from running several times in a function?

Question

I will explain my situation. I have a function that displays a certain ad to the user in the application. After viewing this ad, I call an addeventlistener, who passes a CLOSE event. After this CLOSE event is triggered, the user is rewarded for the video (as I commented in the code snippet).

What Happens : When I watch a video, it adds the reward normally, just once as it should be. But when I watch the second video, it adds the reward twice, so I understand that the event is being run twice the second time, it’s like he’s "guarding" the previous event, and calling the new event. If I see it a third time, it happens the same, it triggers the event 3 times, and adds the reward 3 times there in the database.

Since I’m new to javascript, I need help.

How can I make the deal of this event, so : The user sees a video, sends the reward to the bank, kills the event. The user sees the second video, triggers the event only once, and sends the reward (a reward) to the database, and so on.

Follow the excerpt of my code :

//Vídeos da Inmobi
videosInmobi() {
    let carregar = this.loading.create({content : "Carregando..."});
    carregar.present();
    let rewardConfig: AdMobFreeRewardVideoConfig = {
        isTesting: true,
        autoShow: true,
        id: 'ca-app-pub-8000726989219599/6974786599' //id videos InMobi
    };
    this.admob.rewardVideo.config(rewardConfig);
    this.admob.rewardVideo.prepare().then(() => {
        carregar.dismissAll();
    })
    //Após o usuario assistir o vídeo, chamo esse evento CLOSE, que fecha o video e executa a função
    //this.addReward(); que envia o valor da recompensa ao banco de dados.
    document.addEventListener('admob.rewardvideo.events.CLOSE', () => {
        this.recompensa.data = moment().format('L'); //aqui recebe a data da recompensa
        this.recompensa.valor = 0.02; //aqui recebe 2 centavos a cada recompensa, esse valor é enviado ao banco
        console.log('valor da recompensa : ' +this.recompensa.valor);
        console.log('data : ' +this.recompensa.data);
        this.addReward();
    });       
}

attached image to better explain what is occurring :

Note: I am working with ionic3, but this specific plugin is pure js.

Answer 1

As I recall, there’s no way to verify the existence of a listener to an event. In this case, each time the function addEventListener is called, you add another anonymous function (your case) to be called in sequence. That is, each reward, you will have one more event being called. You would have to call the addEventListener do this only once

1. You can try adding a Boolean value if the event was added or not (remembering that it cannot be a scope variable).

2. Call on document.addEventListener('admob.rewardvideo.events.CLOSE', () = at page startup, where it would be called only once.

3. There is also the function document.removeEventListener which does exactly the opposite of addeventlistener only it doesn’t work with anonymous functions, so you would have to create an external function.

Take a look at this link : How to check wheter dynamically Attached Event Listener exists or not

PS: Sorry I don’t give example codes, I’m not from the javascript area but I tried to help with some information.

Answer 2

Thanks to the companions for the answers, I was able to resolve the issue by calling addeventlistener in the page load as suggested.

So the code went like this :

    ionViewWillEnter() {
    this.showBanner();
    document.addEventListener('admob.rewardvideo.events.CLOSE', () => {
        this.recompensa.data = moment().format('L'); //aqui recebe a data da recompensa
        this.recompensa.valor = 0.02; //aqui recebe 2 centavos a cada recompensa, esse valor é enviado ao banco
        console.log('valor da recompensa : ' +this.recompensa.valor);
        console.log('data : ' +this.recompensa.data);
        this.addReward();
    });  
}