Как я могу показать изображения из одного div только после того, как изображения из другого div стали скрытыми?

Question

Я использую jQuery для отображения / скрытия внутренних элементов div от внешних элементов div при событии mouseenter / mouseout. Количество внутренних элементов в каждом внешнем элементе отличается, и несколько внутренних элементов отображаются в последовательности, один за другим с помощью последовательных вызовов setTimeout: например, setTimeout (showImages, 200), setTimeout (showImages, 400), setTimeout (showImages, 600) и т. д. То же самое для скрытия изображений.

Часть «показать / скрыть» работает хорошо, но проблема в том, что сценарий падает, когда период переключения между внешними элементами слишком короткий: скрывающая последовательность останавливается, внутренние элементы замораживаются на месте, а внутренние элементы делятся от другого внешний div отображаются. Если «переключение» происходит на том же внешнем элементе div (быстро перемещая мышь назад и обратно в элемент div), внутренние элементы div отображаются, а затем сразу скрываются.

Я попытался отложить «показ» внутренних элементов div с помощью setTimeout, если внутренние элементы предыдущего внешнего элемента div имеют класс «.hidden», но безуспешно: задержка работает независимо от того, имеют ли внутренние элементы div класс или нет; просто задерживая показ функции.

Извините, но фактическое решение было уничтожено в порыве разочарования, lol, поэтому я не могу включить его сюда.

Я также пытался использовать обещания, но я мало о них знаю, и потерпел неудачу. Хотя, полагаю, решение связано с ними.

Извините, это мой первый вопрос, поэтому некоторые из приведенных ниже вещей могут оказаться совершенно ненужными, но я думаю, что это наиболее важные части:

const showImagesInSequence = () => {

    switch (storyBoxes.eq(i).attr("id")) {
        case storyBoxes.eq(0).attr("id"):
            showImages();
            setTimeout(showImages, 200);
            setTimeout(showImages, 400);

            break;
        case storyBoxes.eq(1).attr("id"):
            showImages();
            setTimeout(showImages, 200);

            break;
        case storyBoxes.eq(2).attr("id"):
            showImages();

            break;
        default:

            break;
    }
}

const hideImagesInSequence = () => {
    hideImages();
    setTimeout(hideImages, 200);
    setTimeout(hideImages, 400);
    setTimeout(() => {
        storyBoxes.eq(i).children(".story-image").hide();
    }, 1050);
}


// Show and hide story images
$(document).ready(() => {
    storyBoxes.on("mouseenter", () => {
        for (let j = 0; j < storyBoxes.length; j += 1) {
            let mouseWentIntoBox = event.target.id === storyBoxes.eq(j).attr("id");
            let mouseCameFromPage = $(event.relatedTarget).attr("data-anchor") === "secondPage";

            if (mouseCameFromPage && mouseWentIntoBox) {
                i = j;
                showImagesInSequence();
            }
        }
    })

    storyBoxes.on("mouseout", () => { 
        for (let j = 0; j < storyBoxes.length; j += 1) {
            let mouseWentOutOfBox = event.target.id === storyBoxes.eq(j).attr("id");
            let mouseWentIntoImage = getIDs(storyBoxes.eq(j).children(".story-image")).includes(event.target.id);
            let mouseWentOutOfElementIntoImage = getIDs(storyBoxes.eq(j).children(".story-image")).includes(event.relatedTarget.id);
            let mouseWentOutOfElementIntoBox = event.relatedTarget.id === storyBoxes.eq(j).attr("id");

            if (mouseWentOutOfBox && mouseWentOutOfElementIntoImage) {

                break;
            } else if (mouseWentOutOfBox || mouseWentIntoImage) { 

                if (mouseWentOutOfElementIntoImage && mouseWentIntoImage) {

                    break;
                } else if (mouseWentIntoImage && mouseWentOutOfElementIntoBox) {

                    break;
                } else {
                    // Hide images
                    i = j;
                    reversedImage = storyBoxes.eq(i).children(".story-image").length - 1; 
                    hideImagesInSequence();
                }
            }
        }
    })
})

По сути, я ищу решение, позволяющее показывать внутренние элементы div из других внешних элементов div на странице только тогда, когда внутренние элементы div из предыдущего скрыты.

В консоли пока нет ошибок.