Javascript 在Bootstrap 3旋转木马中排队单击事件

我正在制作一个定制的引导3转盘，带有垂直、单向、滑动转换。现在它处于当前状态：

var carouselDuration=function（）{
$.fn.carousel.Constructor.TRANSITION_DURATION=1000；
}
旋转木马（）
.carousel.vertical{
位置：相对位置；
}
.传送带.垂直.传送带内部{
身高：100%；
宽度：自动；
}
.carousel.vertical.carousel-inner>.item{
宽度：自动；
转换：1s易入易出；
转换：translate3d（0,100%，0）；
排名：0；
}
.carousel.vertical.carousel-inner>。下一步，
.carousel.vertical.carousel-inner>.prev，
.carousel.vertical.carousel-inner>。右{
转换：translate3d（0,100%，0）；
排名：0；
}
.carousel.vertical.carousel-inner>.left，
.carousel.vertical.carousel-inner>.prev.right，
.carousel.vertical.carousel-inner>.next.left，
.carousel.vertical.carousel-inner>.active{
变换：translate3d（0,0,0）；
排名：0；
}
.carousel.vertical.carousel-inner>.active.right，
.carousel.vertical.carousel-inner>.active.left{
变换：translate3d（0，-100%，0）；
排名：0；
}
.转盘.垂直.转盘指示器{
显示：内联块；
宽度：自动；
填充：0；
保证金：0；
左：自动；
右：10px；
底部：2px；
z指数：9；
字号：0；
}
.carousel.vertical.carousel指示器li{
边界：无；
光标：指针；
显示：内联块；
宽度：18px；
高度：18px；
文本缩进：-9999px；
背景：url（“https://grgs.ro/1/i/sprite.png）无重复-528px-502px；
}
.carousel.vertical.carousel指示器li.active{
背景位置：-528px-524px；
}




我猜Simpelist解决方案正在使用默认回调

（'slide.bs.carousel'，函数（）{
//删除单击选项
}).on（'slided.bs.carousel'，function（）{
//添加单击选项
})

删除单击选项可以通过使用简单的CSS属性来完成

$（'ol.carousel indicators>li'）.css（'pointer-events'，'none'）

并通过以下方式启用它：

$（'ol.carousel indicators>li'）.css（'pointer-events'，'auto'）

最优雅的解决方案是添加一个类，并在样式表中定义指针事件。并在触发回调时添加/删除该类

.disableClick{指针事件：无；}

回应评论：

要将单击事件排队，您可以使用：

$（this）.queue（）

这会将所做的单击保存到队列中。可以找到更多信息
我认为您应该阅读有关旋转木马事件的信息

当slide.bs.carousel（开始滑动）时，您可以禁用点，并在
（slided.bs.carousel）滑动已经完成了，伙计，你经常使用旋转木马。
不用担心，理论是这样的，首先在动画开始时捕获当前时间（以毫秒为单位），现在知道每个动画都需要1秒，然后捕获旋转控制项上的下一个单击事件

现在比较两个事件之间的延迟，如果超过1秒（即1000ms），只需使用setTimeout延迟旋转木马控件项上的单击事件

检查代码段，在这些控制器上尽可能多地随机单击：


var carouselDuration=function（）{
$.fn.carousel.Constructor.TRANSITION_DURATION=1000；
}
旋转木马（）；
var slideStarted，slideEnded；//声明用于存储动画开始和结束时间的变量，但不要赋值。
$（'#myCarousel'）。on（'slide.bs.carousel'，function（）{
slideStarted=new Date（）.getTime（）；//捕获动画开始时间；
console.log（'started'）；//稍后删除
}).on（'slided.bs.carousel'，function（）{
console.log（'end'）；//稍后删除
});
$（'.carousel indicators'）。查找（'li'）。打开（'click'，函数（）{
slideEnded=new Date（）.getTime（）；//现在捕获下一次单击时间；
如果（slideEnded-slideStarted<1000）{//比较差异，如果它超过您期望的延迟（1秒），则延迟计算值的click事件并boooooom！！！！
log（'early click'，slidended-slideStarted）；
setTimeout（函数（）{
$（此选项）。单击（）；
}，幻灯片显示-幻灯片启动）；
}
});
.carousel.vertical{
位置：相对位置；
}
.传送带.垂直.传送带内部{
身高：100%；
宽度：自动；
}
.carousel.vertical.carousel-inner>.item{
宽度：自动；
转换：1s易入易出；
转换：translate3d（0,100%，0）；
排名：0；
}
.carousel.vertical.carousel-inner>。下一步，
.carousel.vertical.carousel-inner>.prev，
.carousel.vertical.carousel-inner>。右{
转换：translate3d（0,100%，0）；
排名：0；
}
.carousel.vertical.carousel-inner>.left，
.carousel.vertical.carousel-inner>.prev.right，
.carousel.vertical.carousel-inner>.next.left，
.carousel.vertical.carousel-inner>.active{
变换：translate3d（0,0,0）；
排名：0；
}
.carousel.vertical.carousel-inner>.active.right，
.carousel.vertical.carousel-inner>.active.left{
变换：translate3d（0，-100%，0）；
排名：0；
}
.转盘.垂直.转盘指示器{
显示：内联块；
宽度：自动；
填充：0；
保证金：0；
左：自动；
右：10px；
底部：2px；
z指数：9；
字号：0；
}
.carousel.vertical.carousel指示器li{
边界：无；
光标：指针；
显示：内联块；
宽度：18px；
高度：18px；
文本缩进：-9999px；
背景：url（“https://grgs.ro/1/i/sprite.png）无重复-528px-502px；
}
.carousel.vertical.carousel指示器li.active{
背景位置：-528px-524px；
}