Javascript 如果单击“下一步”和“上一步”按钮太快，为什么这个简单的内容滑块会偏离轨道？

我有一个简单的javascript内容滑块，可以显示纯文本。除非您太快地单击“上一步”和“下一步”，否则它工作得相当好。很难准确地复制，但如果你随机反复地来回点击，就会发生两件奇怪的事情：1）一张空白幻灯片会间歇性出现，2）两张幻灯片会重叠并合二为一。任何帮助都将不胜感激

//推荐信
var thisItem=1，nextItem=0，范围=0
//对于每个内容项，设置一个id，然后隐藏。
$（'推荐项'）。每个（函数（）{
nextItem++；
$（this.attr（'id'，nextItem）.hide（）；
});
//范围包含存在多少内容项
range=nextItem，nextItem=2，previitem=range；
//显示第一个内容项
thisHeight=$（“#”+thisItem）.height（）；
$（'#'+此项）.show（）；
$（'.commentials'）.css（'height'，thishheight）；
//隐藏旧内容项、显示下一项、调整内容容器大小
$（'.commential control.next'）。单击（函数（）{
PreviItem=此项；
//获取要调整容器大小的下一个内容项的高度
thishheight=$（'#'+nextItem）.height（）；
//调整内容容器的大小
$（'.commentials'）。设置动画({
高度：（此高度+px）
}，250，'摆动'；
//隐藏旧内容项
$（“#”+此项）.fadeToggle（500，“线性”）；
//显示下一个内容项
$（'#'+nextItem）.fadeToggle（500，“线性”）；
//将旧内容项设置为当前项
此项=下一项；
//如果达到范围，则循环到第一项
如果（此项>=范围）{
nextItem=1；PreviItem=range-1；
}否则{
nextItem++；PreviItem=此项-1；
}
});
//结束下一步单击功能
//隐藏当前内容项、调整内容容器大小、显示上一项
$（'.commential control.prev'）。单击（函数（）{
//如果我们已经到达终点范围，下一项将是第1项
如果（nextItem==1）{//，则将当前项设置为最后一项
此项=范围；
}else thisItem=nextItem-1；
//获取要调整容器大小的下一个内容项的高度
thishheight=$（'#'+previitem）.height（）；
//调整内容容器的大小
$（'.commentials'）。设置动画({
高度：（此高度+px）
}，250，'摆动'；
//隐藏旧内容项
$（“#”+此项）.fadeToggle（500，“线性”）；
//显示下一个内容项
$（'#'+previitem）.fadeToggle（500，“线性”）；
//将下一个内容项设置为当前项
nextItem=该项目；
if（previItem>=范围）{//if在项目末尾
nextItem=1；//第一个
PreviItem=范围-1；
此项=范围；
}否则，如果（prevItem您需要将
.stop（）
和
.stopPropagation（）
添加到所有动画函数中，以防止它们相互“碰撞”：

另外，不要忘记CSS中的结束括号
}
，它会把一切都搞砸

// Testimonials
var thisItem = 1, nextItem = 0, range = 0
//for each content item, set an id, and hide.
$('.testimonial-item').each(function () {
  nextItem++;
  $(this).attr('id', nextItem).stop().hide();
});
//range contains how many content items exist
range = nextItem, nextItem = 2, prevItem = range;
//display the first content item
thisHeight = $('#' + thisItem).stop().height();
$('#' + thisItem).stop().show();
$('.testimonials').css('height', thisHeight);
//hide old content item, show next item, resize content container
$('.testimonial-control.next').click(function (e) {
    e.stopPropagation();
  prevItem = thisItem;
  //get height of next content item to resize container
  thisHeight = $('#' + nextItem).stop().height();
  //resize content container
  $('.testimonials').stop().animate({
    height: (thisHeight + 'px')
  }, 250, 'swing');
  //hide old content item
  $('#' + thisItem).stop().fadeToggle(500, "linear");
  //show next content item
  $('#' + nextItem).stop().fadeToggle(500, "linear");
  //set old content item to current item
  thisItem = nextItem;
  //loop to first item if range reached
  if (thisItem >= range) {
    nextItem = 1; prevItem = range - 1;
  } else {
    nextItem++; prevItem = thisItem - 1;
  }
});
//end next click function
//hide current content item, resize content container, show previous item 
$('.testimonial-control.prev').click(function (e) {
    e.stopPropagation();
  //If we have reached the end range, the next item will be item #1
  if (nextItem == 1) {//so set the current item to the last
    thisItem = range;
  } else thisItem = nextItem - 1;
  //get height of next content item to resize container
  thisHeight = $('#' + prevItem).stop().height();
  //resize content container
  $('.testimonials').stop().animate({
    height: (thisHeight + 'px')
  }, 250, 'swing');
  //hide old content item
  $('#' + thisItem).stop().fadeToggle(500, "linear");
  //show next content item
  $('#' + prevItem).stop().fadeToggle(500, "linear");
  //set next content item to current item
  nextItem = thisItem;
  if (prevItem >= range) {//if at end of items
    nextItem = 1;//first
    prevItem = range - 1;
    thisItem = range;
  } else if (prevItem <= 1) {//if at start of items
    prevItem = range;
    thisItem = 1;
    nextItem = 2;
  } else {//if in the middle of items
    prevItem--;
    thisItem--;
  }
});
//end prev click function

//推荐信
var thisItem=1，nextItem=0，范围=0
//对于每个内容项，设置一个id，然后隐藏。
$（'推荐项'）。每个（函数（）{
nextItem++；
$（this.attr（'id'，nextItem）.stop（）.hide（）；
});
//范围包含存在多少内容项
range=nextItem，nextItem=2，previitem=range；
//显示第一个内容项
thisHeight=$（“#”+thisItem）.stop（）.height（）；
$（“#”+此项）.stop（）.show（）；
$（'.commentials'）.css（'height'，thishheight）；
//隐藏旧内容项、显示下一项、调整内容容器大小
$（'.commential control.next'）。单击（函数（e）{
e、 停止传播（）；
PreviItem=此项；
//获取要调整容器大小的下一个内容项的高度
thishheight=$（'#'+nextItem）.stop（）.height（）；
//调整内容容器的大小
$（'.commentials'）.stop（）.animate({
高度：（此高度+px）
}，250，'摆动'；
//隐藏旧内容项
$（'#'+thisItem）.stop（）.fadeToggle（500，“线性”）；
//显示下一个内容项
$（'#'+nextItem）.stop（）.fadeToggle（500，“线性”）；
//将旧内容项设置为当前项
此项=下一项；
//如果达到范围，则循环到第一项
如果（此项>=范围）{
nextItem=1；PreviItem=range-1；
}否则{
nextItem++；PreviItem=此项-1；
}
});
//结束下一步单击功能
//隐藏当前内容项、调整内容容器大小、显示上一项
$（'.commential control.prev'）。单击（函数（e）{
e、 停止传播（）；
//如果我们已经到达终点范围，下一项将是第1项
如果（nextItem==1）{//，则将当前项设置为最后一项
此项=范围；
}else thisItem=nextItem-1；
//获取要调整容器大小的下一个内容项的高度
thishheight=$（'#'+previitem）.stop（）.height（）；
//调整内容容器的大小
$（'.commentials'）.stop（）.animate({
高度：（此高度+px）
}，250，'摆动'；
//隐藏旧内容项
$（'#'+thisItem）.stop（）.fadeToggle（500，“线性”）；
//显示下一个内容项
$（'#'+previitem）.stop（）.fadeToggle（500，“线性”）；
//将下一个内容项设置为当前项
nextItem=该项目；
if（previItem>=范围）{//if在项目末尾
nextItem=1；//第一个
PreviItem=范围-1；
此项=范围；
}else if（PreviItem这很可能发生，因为动画/淡入淡出切换代码未在再次单击之前完成

在动画完成之前，您应该阻止单击功能的处理。为了完成此操作，我将执行以下操作：

添加全局布尔变量以跟踪动画的状态，例如..
var animating=false；

将所有单击函数包装在if块中，这样它们就不会在if块中运行

animating
为true。如果（！animating）{animating=true；…}

最后一步是在
fadeToggle
：
$（'#'+此项）的完整回调中将
动画设置为false。fadeToggle（500，“linear”，function（）{animating=false；}）；
检查JQuery。这应该可以解决问题。我不认为可能重复
// Testimonials
var thisItem = 1, nextItem = 0, range = 0
//for each content item, set an id, and hide.
$('.testimonial-item').each(function () {
  nextItem++;
  $(this).attr('id', nextItem).stop().hide();
});
//range contains how many content items exist
range = nextItem, nextItem = 2, prevItem = range;
//display the first content item
thisHeight = $('#' + thisItem).stop().height();
$('#' + thisItem).stop().show();
$('.testimonials').css('height', thisHeight);
//hide old content item, show next item, resize content container
$('.testimonial-control.next').click(function (e) {
    e.stopPropagation();
  prevItem = thisItem;
  //get height of next content item to resize container
  thisHeight = $('#' + nextItem).stop().height();
  //resize content container
  $('.testimonials').stop().animate({
    height: (thisHeight + 'px')
  }, 250, 'swing');
  //hide old content item
  $('#' + thisItem).stop().fadeToggle(500, "linear");
  //show next content item
  $('#' + nextItem).stop().fadeToggle(500, "linear");
  //set old content item to current item
  thisItem = nextItem;
  //loop to first item if range reached
  if (thisItem >= range) {
    nextItem = 1; prevItem = range - 1;
  } else {
    nextItem++; prevItem = thisItem - 1;
  }
});
//end next click function
//hide current content item, resize content container, show previous item 
$('.testimonial-control.prev').click(function (e) {
    e.stopPropagation();
  //If we have reached the end range, the next item will be item #1
  if (nextItem == 1) {//so set the current item to the last
    thisItem = range;
  } else thisItem = nextItem - 1;
  //get height of next content item to resize container
  thisHeight = $('#' + prevItem).stop().height();
  //resize content container
  $('.testimonials').stop().animate({
    height: (thisHeight + 'px')
  }, 250, 'swing');
  //hide old content item
  $('#' + thisItem).stop().fadeToggle(500, "linear");
  //show next content item
  $('#' + prevItem).stop().fadeToggle(500, "linear");
  //set next content item to current item
  nextItem = thisItem;
  if (prevItem >= range) {//if at end of items
    nextItem = 1;//first
    prevItem = range - 1;
    thisItem = range;
  } else if (prevItem <= 1) {//if at start of items
    prevItem = range;
    thisItem = 1;
    nextItem = 2;
  } else {//if in the middle of items
    prevItem--;
    thisItem--;
  }
});
//end prev click function