如果指定了回调函数，则从内部删除事件侦听器

Question

I have a situation, where I want to attach a function with parameters to an event listener, like this:

var pauseAudioAt = function(aud, seconds, removeListener) {
    console.log(aud.currentTime);
    // check whether we have passed 5 minutes,
    // current time is given in seconds
    if(aud.currentTime >= seconds) {
        // pause the playback
        aud.pause();
        if (removeListener) {
            aud.removeEventListener('timeupdate', pauseAudioAt);
            showBtn();
        }
    }

}
audio.addEventListener("timeupdate", function() {
                pauseAudioAt(audio, 18, true);
            });

I want to remove the listener as soon as the function invoked? How can I achieve this ?

Thanks.

Answer 1

You have to pass .removeEventListener() a reference to the same function that you passed to .addEventListener() . One way to do that with minimal change to your existing code would be to name your (currently anonymous) function expression, then pass that function to pauseAudioAt() instead of passing the boolean:

var pauseAudioAt = function(aud, seconds, listenerToRemove) {
    console.log(aud.currentTime);
    // check whether we have passed 5 minutes,
    // current time is given in seconds
    if(aud.currentTime >= seconds) {
        // pause the playback
        aud.pause();
        if (typeof listenerToRemove === "function") {
            aud.removeEventListener('timeupdate', listenerToRemove);
            showBtn();
        }
    }    
}

audio.addEventListener("timeupdate", function listener1() {
    pauseAudioAt(audio, 18, listener1);
});

That way, pauseAudioAt() doesn't need a hardcoded reference to which function needs to be removed.

If you want to call pauseAudioAt() without removing the listener then just omit that argument: pauseAudioAt(audio, 18) - or pass false or null or something if that's more convenient: pauseAudioAt(audio, 18, null) .

(If you want to be able to call pauseAudioAt() from some other part of your code and remove the listener then you could combine this with a function declaration as shown in Jaromanda X's answer .)

Answer 2

You can only remove exactly the same function you've added

in your case you could do

// added this
var x = function() {
    pauseAudioAt(audio, 18, true);
}
//
var pauseAudioAt = function(aud, seconds, removeListener) {
    console.log(aud.currentTime);
    // check whether we have passed 5 minutes,
    // current time is given in seconds
    if(aud.currentTime >= seconds) {
        // pause the playback
        aud.pause();
        if (removeListener) {
            aud.removeEventListener('timeupdate', x); // changed this
            showBtn();
        }
    }

}
audio.addEventListener("timeupdate", x); // changed this

Answer 3

Just use named function.

var pauseAudioAt = function(aud, seconds, removeListener) {
    console.log(aud.currentTime);
    // check whether we have passed 5 minutes,
    // current time is given in seconds
    if(aud.currentTime >= seconds) {
        // pause the playback
        aud.pause();
        if (removeListener) {
            aud.removeEventListener('timeupdate', onTimeUpdate);
            showBtn();
        }
    }

}

audio.addEventListener("timeupdate", onTimeUpdate);

function onTimeUpdate() {
    pauseAudioAt(audio, 18, true);
}

It'll remove the handle onTimUpdate for event timeupdate .