javascript - 如果指定回调函数，则从内部移除事件监听器

Question

我有一种情况，我想将带有参数的函数附加到事件监听器，如下所示:

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);
            });

我想在函数调用后立即删除监听器？我怎样才能实现这个目标？

谢谢。

Answer 1

您必须向 .removeEventListener() 传递一个对您传递给 .addEventListener() 的同一函数的引用。对现有代码进行最小更改的一种方法是命名您的(当前是匿名的)函数表达式，然后将该函数传递给 pauseAudioAt() 而不是传递 bool 值:

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);
});

这样，pauseAudioAt() 就不需要对需要删除的函数进行硬编码引用。

如果您想调用 pauseAudioAt() 而不删除监听器，则只需省略该参数:pauseAudioAt(audio, 18) - 或者传递 false 或 null 或其他更方便的东西:pauseAudioAt(audio, 18, null)。

(如果您希望能够从代码的其他部分调用 pauseAudioAt() 并删除监听器，那么您可以将其与函数声明结合起来，如下所示如 Jaromanda X's answer 所示。)