使用 setTimeout 关闭前一个模态后未打开模态

Question

我有一个模态框，它将以渐变动画（不透明度 0 到 1）打开，并以相同的动画（不透明度 1 到 0）关闭。除了结束动画外，一切都在工作。我有一个“淡入淡出”类并使用 JS 来更改“animationName”，具体取决于用户是否关闭/打开模式。 我有 setTimeout 以便可以执行关闭动画，并且模态将显示为“无”，否则模态将立即关闭而没有动画，因为显示将立即执行。

由于 setTimeout 的延迟，每当我关闭模态并立即垃圾邮件单击另一个图像时，模态将不会打开，直到 setTimeout 的延迟由于某种原因完成。但是，如果我在模态关闭并单击另一张图片后等待一秒钟，它就会打开。

可能有更好的方法来实现动画来打开/关闭我的模式，但这是我唯一可以开始工作的方法。对实现动画的新想法持开放态度，谢谢！

这是一个解释我的问题的视频。 https://streamable.com/jflu55

https://jsfiddle.net/Boros/kseaoz1h/4/

"use strict";

const $ = selector => document.querySelector(selector);
const $all = selector => document.querySelectorAll(selector);

const gallery = $all("#gallery img, #gallery .video_container");
console.log(gallery.length);

const slides = $all("#my_modal div");
console.log(slides.length);

const closeModal = evt => {
    // Loops to find the slide that the user clicked on if needed
    for ( let i in slides ) {
        /* Checks the correct slide container the user clicked against the index of the slides.
         Loops until it finds it, or if clicked the close button */
        if ( evt.target == slides[i] || evt.target == $("#close_button") ) {

            $(".fade").style.animationName = "fadeOut";

            // Closes modal after animation finishes
            setTimeout( () => {
                $("#my_modal").style.display = "none";

                /* Will set the display of all the slides to none no matter what 
                in order to prevent undefined errors when clicking the close button */
                for (let i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
            }, 1998);
            
            // Allows page to be scrollable
            $("body").style.overflow = "initial";
        
            // Allows images to be tab accessible
            for (let i = 0; i < gallery.length; i++) {
                gallery[i].setAttribute("tabindex", "1");
            }

            const videos = $all(".video_slides video");
            // Will pause the video when you close out of the modal
            for (let p = 0; p < videos.length; p++) {
                videos[p].pause();
            }
        }
    }
}

const openModal = evt => {
    // Loops to find the index of the image or video that the user clicked on
    for ( let i in gallery ) {
        /* Checks the image or video the user clicked against the index of the gallery.
         Loops until it finds it */
        if ( evt.currentTarget == gallery[i] ) {
            // Prevents page from being scrollable inside the modal
            $("body").style.overflow = "hidden";

            // Prevents images inside #gallery from being tabbed to 
            for (let t = 0; t < gallery.length; t++) {
                gallery[t].removeAttribute("tabindex");
            }

            $("#my_modal").style.display = "initial";

            // Opening animation for modal
            $(".fade").style.animationName = "fadeIn";

            
            // Displays the correct image or video
            slides[i].style.display = "initial";

            // Closes modal when clicked outside the image
            slides[i].addEventListener("click", closeModal);
        }
    }
}

gallery.forEach(item => {
    item.addEventListener('click', evt => {
        openModal(evt);
    })
})

gallery.forEach(item => {
    item.addEventListener('keyup', evt => {
        if ( evt.keyCode == 13 ) {
            openModal(evt);
        }
    });
})

$("#close_button").addEventListener("click", closeModal);

$("#close_button").addEventListener("keyup", evt => {
    if ( evt.keyCode == 13 ) {
        closeModal(evt);
    }
});

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.fade {
    animation-duration: 2s;
}
#my_modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: auto;
    margin: 0;
    padding: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.img_slides, .video_slides {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

编辑：我发现我的问题只有在您点击关闭图片不在的区域中的另一张图片时才会出现。如果您点击关闭图片所在的另一张图片，则不会发生。

Answer 1

我的问题是由于垃圾点击导致 setTimeout 延迟被重置，因为每次我点击图片外部时都会触发一个 eventListener。

一旦用户在图像外部单击以关闭模式，我就删除了 eventListener，这可以防止 setTimeout 延迟被重置，从而解决了问题。

// Prevents  setTimeout delay from resetting due to spam clicking outside the image

slides[i].removeEventListener("click", closeModal);