如何停止Bootstrap 3.0 Carousel动画队列

Question

我希望停止/清除Bootstrap 3.0旋转木马的动画队列。我做了一些研究，看起来它没有使用jQuery动画。我最初想在jQuery中使用.stop()方法。我相信还有其他有类似问题的开发人员。

除了进入Bootstrap代码外，还有解决此问题的解决方案吗？为了复制问题，只需迅速悬停在图像拇指上。您会看到动画已排队并继续，直到队列为空为止。这是jsfddle上的样品轮播。

<!-- HTML SECTION  -->
<!-- A carousel that has 3 preview thumbs-->
<div id="show-carousel-wrapper">
    <div id="show-carousel" class="carousel slide " data-ride="carousel" data-interval="false">
        <div class="ribbon ribbon-md hidden-xs"> <span class="ribbon-md-txt">THIS WEEK</span>
        </div>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active" data-slide-number="0">
                <a href="#">
                    <div class="overlay"></div>
                    <div class="carousel-header">
                        <span class="slide-category">MONDAY 11/11/14</span>
                        <h2>SLIDE 1</h2>
                    </div>
                    <img src="http://placehold.it/300x240" alt="">
                </a>
            </div>
            <div class="item" data-slide-number="1">
                <a href="#">
                    <div class="overlay"></div>
                    <div class="carousel-header">
                        <span class="slide-category">TUESDAY 11/11/14</span>
                        <h2>SLIDE 2</h2>
                    </div>
                    <img src="http://placehold.it/300x240" alt="">
                </a>
            </div>
            <div class="item" data-slide-number="2">
                <a href="#">
                    <div class="overlay"></div>
                    <div class="carousel-header">
                        <span class="slide-category">WEDNESDAY 11/11/14</span>
                        <h2>SLIDE 3</h2>
                    </div>
                    <img src="http://placehold.it/300x240" alt="">
                </a>
            </div>
        </div>
        <!-- /carousel-inner -->
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#show-carousel" role="button" data-slide="prev"></a>
        <a class="right carousel-control" href="#show-carousel" role="button" data-slide="next"></a>
        <!-- /Left and right controls -->
        <ul class="carousel-thumb-wrapper">
            <li class="carousel-thumb selected" data-target="#show-carousel" data-slide-to="0"> <span class="carousel-day">MO</span>
                <img src='http://placehold.it/60x60'>
            </li>
            <li class="carousel-thumb" data-target="#show-carousel" data-slide-to="1"> <span class="carousel-day">TU</span>
                <img src='http://placehold.it/60x60'>
            </li>
            <li class="carousel-thumb" data-target="#show-carousel" data-slide-to="2"> <span class="carousel-day">WE</span>
                <img src='http://placehold.it/60x60'>
            </li>
        </ul>
        <!-- /carousel-thumb-wrapper -->
    </div>
</div>
<!-- /show-carousel-wrapper -->
/* JS SECTION */
$("#show-carousel .carousel-thumb").hover(function (ev) {
    var _this = this;
    updatePreviewThumb(_this);
});
//update preview thumbs
function updatePreviewThumb(this_carousel) {
    var carousel_id = $(this_carousel).attr("data-target");
    var slide_to = parseInt($(this_carousel).attr('data-slide-to'));
    $(carousel_id).find('.carousel-thumb').removeClass('selected');
    $(this_carousel).addClass('selected');
    $(carousel_id).carousel(slide_to);
}

Answer 1

尝试拒绝回调：

function debounce(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this,
            args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}
var updatePreviewThumb = debounce(function (this_carousel) {
    var carousel_id = $(this_carousel).attr("data-target");
    var slide_to = parseInt($(this_carousel).attr('data-slide-to'));
    $(carousel_id).find('.carousel-thumb').removeClass('selected');
    $(this_carousel).addClass('selected');
    $(carousel_id).carousel(slide_to);
}, 400);

https://jsfiddle.net/r78j8np5/6/