Help writing removeEventListener

Using JavaScript with Hype
1

My javascript skills are limited and it is likely I’m missing something basic but I’m having trouble adding a removeEventListener.

I have a Hype function that runs this:

window.scoreView.setPartProperties(1, {muted:true});
 window.scoreView.setPartProperties(0, {visible:false});
 window.scoreView.setPartProperties(1, {visible:false});
 window.scoreView.setPartProperties(2, {muted:false});
 window.scoreView.setPartProperties(3, {muted:true});
 window.scoreView.setPartProperties(2, {visible:true});
 window.scoreView.setPartProperties(3, {visible:false});
 
window.scoreView.playFromMeasure(0); 


window.scoreView.addEventListener('playbackStop', function(event) {
   
   window.scoreView.setPartProperties(1, {muted:true});
 window.scoreView.setPartProperties(0, {visible:false});
 window.scoreView.setPartProperties(1, {visible:false});
 window.scoreView.setPartProperties(2, {muted:true});
 window.scoreView.setPartProperties(3, {muted:false});
 window.scoreView.setPartProperties(2, {visible:false});
 window.scoreView.setPartProperties(3, {visible:true});
    
    window.scoreView.playFromMeasure(0);
   
    
     });

Should I be adding
window.scoreView.removeEventListener('playbackStop', function(event);

and if so, where?

My understanding according to the API I’m using is this:

Using removeEventListener() to handle events

To stop being notified of events occurring for an embedded document, call the removeEventListener(type, handler) method on an NFClient.ScoreView object, specifying an event type and a callback function previously provided to addEventListener():

  function handleScoreDataLoaded() {...}

  function setupScore() {
    var scoreView = new NFClient.ScoreView(elementId, scoreId);
    scoreView.addEventListener('scoreDataLoaded', handleScoreDataLoaded);
  }

  function teardownScore() {
    scoreView.removeEventListener('scoreDataLoaded', handleScoreDataLoaded);
  }

Thanks for any help with this.

2

You place the remove code where you need to say ‘STOP’ listening now. So it is up to you.

But your way of writing the addEventListener and the way that the example is written are two different ways of doing it.

Change your code so that the addEvent has a named function and put your code for the properties in that.
This will make it easier for you to control and understand what you are doing.

addEvent.

scoreView.addEventListener('scoreDataLoaded', handleScoreDataLoaded);

handleScoreDataLoaded function

function handleScoreDataLoaded() {
 window.scoreView.setPartProperties(1, {muted:true});
 window.scoreView.setPartProperties(0, {visible:false});
 window.scoreView.setPartProperties(1, {visible:false});
 window.scoreView.setPartProperties(2, {muted:true});
 window.scoreView.setPartProperties(3, {muted:false});
 window.scoreView.setPartProperties(2, {visible:false});
 window.scoreView.setPartProperties(3, {visible:true});
    
    window.scoreView.playFromMeasure(0);

}

And then
removeEventListener which is placed where you need it

scoreView.removeEventListener('scoreDataLoaded', handleScoreDataLoaded);

Notice I did not put the add/removeEventListener inside a function like in the example. It is up to you if you have them inside any other functions.

3

Thanks @MarkHunte. This does help my understanding. I think I’m attempting to do it how you’ve outlined but without success.

I have:

window.scoreView.addEventListener('playbackStop', function(event) {
       
 window.scoreView.setPartProperties(1, {muted:true});
 window.scoreView.setPartProperties(0, {visible:false});
 window.scoreView.setPartProperties(1, {visible:false});
 window.scoreView.setPartProperties(2, {muted:true});
 window.scoreView.setPartProperties(3, {muted:false});
 window.scoreView.setPartProperties(2, {visible:false});
 window.scoreView.setPartProperties(3, {visible:true});
        
     
        
     window.scoreView.playFromMeasure(0);
        
         });


        
  window.scoreView.removeEventListener('playbackStop', function(event);

When the playbackStop method is called via the API I want it to run this:

 window.scoreView.setPartProperties(1, {muted:true});
 window.scoreView.setPartProperties(0, {visible:false});
 window.scoreView.setPartProperties(1, {visible:false});
 window.scoreView.setPartProperties(2, {muted:true});
 window.scoreView.setPartProperties(3, {muted:false});
 window.scoreView.setPartProperties(2, {visible:false});
 window.scoreView.setPartProperties(3, {visible:true});
    
 
    
 window.scoreView.playFromMeasure(0);

Then the very next time the playbackStop method is called I do not want it to run anything so I’m trying to removeEventListener ‘playbackStop’

Is it my formatting wrong or am I going about this the wrong way?

Thank you!

4

You want it to be like this

scoreView.addEventListener('playbackStop', handleScoreDataLoaded);

function handleScoreDataLoaded() {

//-- when this function is called be the Event.. do this..

 window.scoreView.setPartProperties(1, {muted:true});
 window.scoreView.setPartProperties(0, {visible:false});
 window.scoreView.setPartProperties(1, {visible:false});
 window.scoreView.setPartProperties(2, {muted:true});
 window.scoreView.setPartProperties(3, {muted:false});
 window.scoreView.setPartProperties(2, {visible:false});
 window.scoreView.setPartProperties(3, {visible:true});
    
    window.scoreView.playFromMeasure(0);

//-- Now we stop any future calls to this function
scoreView.removeEventListener('playbackStop', handleScoreDataLoaded);
}
1 Like
5

Thanks Mark. I’m sure I’m not understanding something quite basic.
Unfortunately, I’m not totally able to wrap my head around this as I’m trying to stop a different eventListener then you are demonstrating in your example.

I’m calling playbackStop not scoreDataLoaded

Here’s why I think this is significant: playbackStop is being called by an event. When this “stops” playing…

window.scoreView.playFromMeasure(0);

…I using window.scoreView.addEventListener('playbackStop', function(event) play something different also triggered by window.scoreView.playFromMeasure(0);

So what happens is a continual loop as every time the second event stops it triggers the ‘playbackStop’ listener.

Sorry for beating a dead horse here which I’m sure is due to my ignorance…

Thanks
Matt

6

Sorry, that was just a typo.

Just replace it with any event that you need in this case playbackStop

I have corrected above

1 Like
7

@MarkHunte mentioned it in his first reply but I’m just going to highlight it here.

“named function”

When using addEventListener and removeEventListener you must use a named function and not an anonymous function

Named:
function myFunction(event) {

}
Anonymous:
function(event) {

}

So, whatever you want to happen on an event you put in a function and call it when adding or removing the listeners. If you are not going to remove the listener you can use an anonymous function.

2 Likes
8

Thanks @DBear and @MarkHunte for your help so much!

Changing it to a named function is what I need to do.

Incidentally, you guys are helping us have a big impact on music education. These lessons we are creating serve my nonprofit. More info here

1 Like