JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow_container">
    <div class="slide" id="slide1"></div>
    <div class="slide" id="slide2"></div>
    <div class="slide" id="slide3"></div>
    <div class="slide" id="slide4"></div>
</div>
<button>Purple</button>

<p>The cycle normally goes: blue -&gt; green -&gt; pruple -&gt; orange -&gt; repeat.  When the button is clicked, it should stop animating everything and clear the queue, then restart the cycle at the third (purple) slide. This works as expected, except that it's simple to break the animation by quickly clicking the button multiple times.</p>

CSS

#slideshow_container {
    height: 100px;
    position: relative;
    width: 100px;
}
.slide {
    height: 100px;
    width: 100px;
}
#slide1 {
    background: #ace;
}
#slide2 {
    background: #cea;
}
#slide3 {
    background: #cae;
}
#slide4 {
    background: #eca;
}

JavaScript

$(document).ready(function() {
    $('.slide').css({
        'position': 'absolute',
        'display': 'none'
    });
    runSlideShow(1);

    $('button').click(function() {
        $('.slide:visible').stop(true, true).fadeOut(500, function() {
            runSlideShow(3);
        });
    });

    function runSlideShow(slideNumber) {
        $('#slide' + slideNumber).fadeIn(500).delay(3000).fadeOut(500, function() {
            // if we're on the last slide (number 4), start over at number 1
            if (slideNumber == 4) {
                runSlideShow(1);
            }
            // otherwise, just move to the next slide
            else {
                slideNumber++;
                runSlideShow(slideNumber);
            }
        });
    }
});