javascript - 在同一元素上启动另一个事件监听器时如何停止一个事件监听器？

Question

我正在用 js 创建某种画廊作为练习。我发现一个错误，但不知道如何解决。

JSFiddle 上的完整代码 -> Code

背景

我将两个事件监听器添加到我的 img 包装器中， 包装看起来像这样:

<div class="gallery-item"> <-- wrapper
 <img src=""> <-- image
 <div> <-- overlay
 </div>
</div>

以及类似的监听器(我在 js 中创建包装器期间添加的监听器):

imageWrapper.addEventListener('mouseenter', enableOverlay, false);
imageWrapper.addEventListener('mouseleave', disableOverlay, false);

监听器调用函数，这些函数负责在图像上显示叠加层。第一个显示具有淡入淡出效果的叠加，第二个则以相同的效果隐藏它。

启用叠加

function enableOverlay(e) {
    var el = this.childNodes[1].style;
    el.display = 'block';
    (function fadeIn() {
        if (el.opacity < 1) {
            el.opacity = parseFloat(el.opacity) + Number(0.1);
            setTimeout(fadeIn, 30);
        }
    }());
}

禁用叠加

function disableOverlay(e) {
    var el = this.childNodes[1].style;
    (function fadeOut() {
        if (el.opacity > 0) {
            el.opacity = parseFloat(el.opacity) - Number(0.1);
            setTimeout(fadeOut, 30);
        } else {
            el.display = 'none';
        }
    }());
}

问题

乍一看，如果我在图像上缓慢移动鼠标，一切都正常 - 一个功能结束(不透明度= 1)，第二个功能开始，直到不透明度= 0。但是当我在图像上快速移动鼠标时，覆盖开始闪烁 - 不透明度增加和减少 0.1(IIFE 中的值)和脚本循环。

据我所知，此行为的原因是 enableOverlay 未完成(el.opacity 未达到 1)，同时 disableOverlay 开始。而且我不知道如何解决这种情况。

我试图使用代表衰落函数状态并破坏 IFFE 的标志来处理它，但它没有帮助。

长话短说，任何人都可以帮助我解决这个问题或向我展示解决它的思维方式吗？

编辑

在我看来，我的问题是“当另一个事件监听器被触发时如何停止一个事件监听器中的功能”。更改不透明度只是一个示例。

Answer 1

您可以使用 css 过渡。

function enableOverlay(e) {
    var el = this.childNodes[1].style;
    el.opacity = '1';
}

function disableOverlay(e) {
    var el = this.childNodes[1].style;
    el.opacity = '0';
}

.gallery-item img+div {
    cursor: pointer;
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    -ms-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

https://jsfiddle.net/zjqpxzmj/