Javascript事件奇怪的行为，removeEventListener无法正常工作

Posted 2021-03-29

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

但是，我当前的解决方案似乎没有从“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);
}

答案

你绑定的回调是stopMovingKillerImage.bind(null, killRacerTimerID, randomRacer)，但你试图解开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));