Javascript 单击添加类时的JQuery

大家好我已经创建了一个简单的汽车动画，但是有很多问题，当用户同时单击多个按钮时，视频中将出现此问题，因此如何防止此问题，原因是我们无法预测用户将做什么

这里是我的代码：

$（文档）.ready（函数（）{
变量$cars=$（'.car'）；
var-temp=1；
$（'car model'）。在（'click'，函数（）{
/*=========================
*添加活动类
*/
$（this）.addClass（'activeModel'）.parent（）.sibbins（）.find（'.car model'）.removeClass（'activeModel'）；
var index=$（this.data（'index'）；
如果（临时==索引）{
}否则{
var$current=$cars.find（'.current'）；
var$next=$（“[data car index=“”+index+“]”）父项（）；
$current.addClass（'car--trans out'）；
setTimeout（函数（）{
$（“.car image container”）.removeClass（'whelrotateClick'）；
$current.removeClass（'current'）.removeClass（'car--trans out'）；
$next.addClass（'current'）.addClass（'car--trans-in'）；
setTimeout（函数（）{
$next.removeClass（'car--trans-in'）；
}, 1000)
}, 1000);
}
温度=指数；
});
$（'.selectContainer'）。在（'change'，函数（）{
var index=$（this）.find（'option:selected'）.data（'index'）；
var$current=$cars.find（'.current'）；
var$next=$（“[data car index=“”+index+“]”）父项（）；
$current.addClass（'car--trans out'）；
setTimeout（函数（）{
$current.removeClass（'current'）.removeClass（'car--trans out'）；
$next.addClass（'current'）.addClass（'car--trans-in'）；
setTimeout（函数（）{
$next.removeClass（'car--trans-in'）；
}, 1000)
}, 1000);
});
});
.car{
填充：40px0；
}
.car.changeCarSelect{
显示：无；
文本对齐：左对齐；
}
.car.changeCarSelect span{
显示：内联块；
保证金权利：4px；
字体大小：14px；
}
.汽车。选择集装箱{
宽度：200px；
填充：10px 5px；
显示：内联块；
边缘底部：30px；
字体大小：14px；
边框：1px实心rgba（2462462460.89）；
大纲：无；
光标：指针；
}
.汽车.汽车按钮.汽车模型{
宽度：100%；
边缘底部：30px；
光标：指针；
}
.汽车.汽车按钮.h3型汽车{
保证金：0；
填充：15px 10px；
边框：2px实心#e9e9e9；
颜色：#333；
字体系列：“Raleway”，Arial，塔荷马；
字号：700；
字号：18px；
文本对齐：居中；
-moz过渡：全部。4轻松输入输出；
-o-transition：全部。4s易于输入输出；
-webkit过渡：全部。4s易入易出；
过渡：全部。4s轻松进出；
}
.car.car按钮.car-model.activeModel h3{
背景色：#333；
颜色：#ffffff；
}
.car div[class^='col']{
填充：4px；
}
.汽车{
位置：相对位置；
宽度：100%；
利润率：0.20px；
溢出：隐藏；
}
.汽车影像容器{
位置：绝对位置；
左：100%；
溢出：隐藏；
}
.汽车.汽车图像{
显示：无；
}
.汽车.汽车图像img{
保证金：自动；
}
.汽车.电流{
位置：相对位置；
左：0；
}
.汽车.当前.汽车图像{
显示：块；
}
.car--trans-in.car图像{
-moz动画：变速器输入1秒放松输出；
-o-动画：变速器输入1秒，减速器输出；
-webkit动画：trans-in 1s轻松推出；
动画：trans-in 1s-ease-out；
-moz动画填充模式：正向；
-o-动画-填充模式：正向；
-webkit动画填充模式：正向；
动画填充模式：正向；
-moz动画计时功能：立方贝塞尔（0.165,0.84,0.44,1）；
-o动画计时功能：立方贝塞尔（0.165,0.84,0.44,1）；
-webkit动画计时功能：立方贝塞尔（0.165,0.84,0.44,1）；
动画计时功能：立方贝塞尔（0.165,0.84,0.44,1）；
}
.car--trans out.car图像{
-moz动画：转换输出1s轻松输入；
-o-动画：转换输出1s缓进；
-webkit动画：转换输出1s轻松输入；
动画：trans out 1s轻松进入；
-moz动画填充模式：正向；
-o-动画-填充模式：正向；
-webkit动画填充模式：正向；
动画填充模式：正向；
-moz动画计时功能：立方贝塞尔（0.895,0.03,0.685,0.22）；
-o-动画-计时-功能：立方贝塞尔（0.895,0.03,0.685,0.22）；
-webkit动画计时功能：立方贝塞尔（0.895,0.03,0.685,0.22）；
动画计时功能：立方贝塞尔（0.895,0.03,0.685,0.22）；
}
@-moz关键帧转换为in{
0% {
-moz变换：translateX（150%）；
-ms转化：translateX（150%）；
-o-转换：translateX（150%）；
-webkit转换：translateX（150%）；
转化：translateX（150%）；
}
80% {
-moz变换：translateX（0%）；
-ms转换：translateX（0%）；
-o-转换：translateX（0%）；
-webkit转换：translateX（0%）；
转化：translateX（0%）；
}
100% {
-moz变换：translateX（0%）；
-ms转换：translateX（0%）；
-o-转换：translateX（0%）；
-webkit转换：translateX（0%）；
转化：translateX（0%）；
}
}
@-webkit关键帧跨入{
0% {
-moz变换：translateX（150%）；
-ms转化：translateX（150%）；
-o-转换：translateX（150%）；
-webkit转换：translateX（150%）；
转化：translateX（150%）；
}
80% {
-moz变换：translateX（0%）；
-ms转换：translateX（0%）；
-o-转换：translateX（0%）；
-webkit转换：translateX（0%）；
转化：translateX（0%）；
}
100% {
-moz变换：translateX（0%）；
-ms转换：translateX（0%）；
-o-转换：translateX（0%）；
-webkit转换：trans
// if you use CSS3 transition
$("selector").on("transitionend", function(){
   // do something ... like make buttons clickable again...
});

$("selector").on("animationend", function(){
   // do something
});