javascript cannot remove eventListener. (ts)-CodePudding

index.ts

if(audio.paused) {
    audio.play()

    audio.addEventListener('timeupdate', (e) => handleAudioPlayer(<HTMLAudioElement>e.target, 
        <HTMLDivElement>audio.parentElement), true);
}

else {
    audio.pause()

    audio.removeEventListener('timeupdate', () => handleAudioPlayer, true);
}

Basically I have a handleAudioPlayer function that takes 2 arguments, when the audio is playing the event listener is added, and when its paused it should get removed, but here the eventListeners are getting duplicated which is bad, any help is appreciated!

CodePudding user response：

You're trying to remove a different function than you added in the first place. Instead, try to add and remove the same handler.

const handler = (e) => handleAudioPlayer(<HTMLAudioElement>e.target, 
        <HTMLDivElement>audio.parentElement)
audio.addEventListener('timeupdate', handler, true)
audio.removeEventListener('timeupdate', handler, true)

CodePudding user response：

In your case you should declare your function to a variable. Then you can remove the eventListener.

if(audio.paused) {
  audio.play()

  audio.addEventListener('timeupdate', handleAudioPlayer, true);
}

else {
  audio.pause()

  audio.removeEventListener('timeupdate', handleAudioPlayer, true);
}

let handleAudioPlayer = (evt) => {
 // do something
};