如何用JavaScript阻止Bootstrap轮播指示器的动画事件队列叠加？

Hey, I've run into this exact issue with Bootstrap 4 carousels before! The default behavior lets you trigger slide transitions even if the previous one hasn't finished, which leads to that annoying event queue buildup where your slide.bs.carousel callback fires over and over. Here are a couple of solid solutions to fix this:

Solution 1: Leverage Bootstrap's Built-in Sliding State Check #

Bootstrap 4's carousel component has a handy method to check if it's currently in the middle of a slide transition. We can use this to block new click events on indicators while the carousel is sliding.

// Target all carousel indicator buttons
$('.carousel-indicators li').on('click', function(e) {
  const $carousel = $('#myCarousel');
  
  // Check if the carousel is actively sliding
  if ($carousel.carousel('is', 'sliding')) {
    // Prevent the click from triggering a new slide
    e.preventDefault();
    e.stopPropagation();
    return false;
  }
});

How this works: #

The carousel('is', 'sliding') method returns true if the carousel is in the middle of its transition animation. By checking this before allowing the click to proceed, we stop new slide requests from piling up in the queue. This is a lightweight approach since it uses Bootstrap's native state tracking.

Solution 2: Disable Interactions Entirely During Slides #

If you want a more user-friendly approach (so users can't even click indicators while the carousel is moving), we can disable the indicators during the slide and re-enable them once the animation finishes.

const $carousel = $('#myCarousel');
let isCarouselSliding = false;

// Triggered when the slide starts
$carousel.on('slide.bs.carousel', function() {
  isCarouselSliding = true;
  // Disable indicator clicks visually and functionally
  $('.carousel-indicators li')
    .addClass('disabled')
    .css('pointer-events', 'none');
});

// Triggered when the slide animation completes
$carousel.on('slid.bs.carousel', function() {
  isCarouselSliding = false;
  // Re-enable indicators
  $('.carousel-indicators li')
    .removeClass('disabled')
    .css('pointer-events', 'auto');
});

// Extra safety check for clicks
$('.carousel-indicators li').on('click', function(e) {
  if (isCarouselSliding) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  }
});

How this works: #

We use two Bootstrap carousel events:

• slide.bs.carousel: Fires immediately when the slide transition starts. We set a flag and disable the indicators here.
• slid.bs.carousel: Fires after the slide transition completes. We reset the flag and re-enable the indicators.

The pointer-events: none CSS property makes the indicators unclickable, while adding the disabled class gives a visual cue (you can style this in your CSS to make it obvious they're inactive).

Bonus: Apply to Control Buttons #

If you also have prev/next control buttons, you can apply the same logic to them by targeting .carousel-control-prev and .carousel-control-next instead of (or in addition to) the indicators.

内容的提问来源于stack exchange，提问作者ionitalex