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.
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 .)
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
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
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.