I have following method which execute a video clip and on progress of the video clip it does one alert, after that alert it was suppose to close the listener but it is not ending the event listener as a result the alert keep showing forever like infinite.

Is this a BUG? or there is something missing in my following code?

function video_present(input) {

  $('#mediaplayer').prop('loop', false); 
  $('#mediaplayer').attr('src', filename).show();
  mediaplay_video= document.getElementById('mediaplayer');  
  mediaplay_video.play();      
  
  // STOP repeating??
  mediaplay_video.addEventListener('timeupdate', function() {
    var sss = parseInt(mediaplay_video.currentTime % 60);
    show_second();
  }, false);  
  
}

// kill Event after 1 time execute of this
function show_second() {
  alert('I was executed - stop me now if you can??');
  mediaplay_video.removeEventListener('timeupdate', function() {
    alert('I am killed, but why am i again getting called???');
  });


}

video_present('Terminator_10.webm');

I have following method which execute a video clip and on progress of the video clip it does one alert, after that alert it was suppose to close the listener but it is not ending the event listener as a result the alert keep showing forever like infinite.

Is this a BUG? or there is something missing in my following code?

function video_present(input) {

  $('#mediaplayer').prop('loop', false); 
  $('#mediaplayer').attr('src', filename).show();
  mediaplay_video= document.getElementById('mediaplayer');  
  mediaplay_video.play();      
  
  // STOP repeating??
  mediaplay_video.addEventListener('timeupdate', function() {
    var sss = parseInt(mediaplay_video.currentTime % 60);
    show_second();
  }, false);  
  
}

// kill Event after 1 time execute of this
function show_second() {
  alert('I was executed - stop me now if you can??');
  mediaplay_video.removeEventListener('timeupdate', function() {
    alert('I am killed, but why am i again getting called???');
  });


}

video_present('Terminator_10.webm');

• javascript
• jquery
• google-chrome
• jquery-events

• 1 You can't kill anonymous event listeners. Define a named handler function, and use a reference to that function when adding/removing listeners. – Teemu Commented Aug 22, 2016 at 6:35
• @Teemu, i did that but still same. i already did like this which also failed. addEventListener('', not_annoymouse_lister() ); – user285594 Commented Aug 22, 2016 at 6:40
• 1 addEventListener('', not_annoymouse_lister); - without the prantheses, or else you'll be setting what the function returns as the event handler, instead of the function itself. – techfoobar Commented Aug 22, 2016 at 6:41

1 Answer 1

The second argument to removeEventListener is the listener function itself. If you do not pass the same argument as with addEventListener, it will not be removed. Use a named function or a function variable to ensure the same function object is used in both places:

function handleTimeUpdate() {
  var sss = parseInt(mediaplay_video.currentTime % 60);
  show_second(); 
}

mediaplay_video.addEventListener('timeupdate', handleTimeUpdate, false);  

...

mediaplay_video.removeEventListener('timeupdate', handleTimeUpdate);