How to prevent an addEventListener from running multiple times in a function?

I will explain my situation. I have a function that displays a certain ad to the user in the app. After viewing that ad, I call an addEventListener, which 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, only once as it should be. But when I see the second video, it it adds the reward twice, so I understand that the event is running twice the second time, it's like it's "saving" the previous event, and calling the new event. If I see it for the 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 deal with this event, so that: the user sees a video, sends the reward to the bank, kill 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.

Follows the excerpt from 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 happening:

insert the description of the image here

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

Author: Diego Estacho, 2018-11-12
Source

2 answers

As I recall, there is no way to verify the existence of a listener of an event. In the case, each time the addEventListener function is called, you add one more 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 addEventListener do this only once

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

  2. Call 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 would have to create an external function.

Take a look at this link : how to check why dynamically attached event listener exists or not

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

 0
Author: Kevin Kouketsu, 2018-11-12 11:17:39

Thanks to the Companions for the answers, I was able to solve the issue by calling the addEventListener on page loading as suggested.

Then the code looked 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();
    });  
}
 0
Author: Diego Estacho, 2018-11-12 11:50:23