Javascript 事件奇怪的行为，removeEventListener 不起作用

Question

我试图通过在完成事件监听器后删除事件监听器来阻止事件被多次调用。 (我需要能够多次调用这些函数)

但是，我当前的解决方案似乎没有从“imageEvilRace”中删除事件监听器，因为当我第二次调用这些函数时，“killRacer”最终“杀死”了第一次的目标元素，以及新的目标。 (killRacer 删除了它第一次定位的同一个图像，而第二次调用时它不应该引用第一个图像)

以下是将相关功能简化为对我的问题重要的部分。

function killRacer() {
    var listOfRaceImgs = getListOfRaceImages();

    var killRacerTimerID = setInterval(moveEvilRaceImage.bind(null, randomRacer), 40);

    imageEvilRace.addEventListener("stopKiller", stopMovingKillerImage.bind(null, killRacerTimerID, randomRacer));
}

function moveEvilRaceImage(imageToKill) {
    imageEvilRace.dispatchEvent(stopKillerEvent);
}

function stopMovingKillerImage(killRacerTimerID, randomRacer) {
    clearInterval(killRacerTimerID);
    randomRacer.style.display = "none";
    randomRacer.style.left = 0 + "px";
    imageEvilRace.src = explosionImageSource;
    imageEvilRace.removeEventListener("stopKiller", stopMovingKillerImage);
}

Answer 1

您绑定(bind)的回调是 stopMovingKillerImage.bind(null,killRacerTimerID, randomRacer)，但您尝试取消绑定(bind) stopMovingKillerImage。它们是两个不同的函数。

我将创建一个包装函数来处理一次性事件处理程序的正确函数的存储，如下所示:

function bindOnce(object, event, callback) {
    var new_callback = function() {
        callback.apply(this, arguments);
        object.removeEventListener(event, new_callback)
    };

    object.addEventListener(event, new_callback);
}

bindOnce(imageEvilRace, "stopKiller", stopMovingKillerImage.bind(null, killRacerTimerID, randomRacer));