防止在选择功能后运行其他功能答案

【问题标题】：Prevent other functions running after selected function防止在选择功能后运行其他功能
【发布时间】：2013-07-15 11:56:18
【问题描述】：

我有一个 div #imageSwap 和三个按钮 #button1、#button2、#button3。前两个按钮更改 div 的 HTML 以保存特定图像，第三个按钮启动多个图像的旋转。

由于某种原因，当点击第三个（旋转）按钮时，它运行良好，但是当在第三个按钮之后点击第一个或第二个按钮时，动画在不应该运行的时候运行。

<script language="javascript" type="text/javascript">

$(document).ready(function () {
  setImageOne();
  $('#button1').addClass('selected');     


  $("a#button1").click(function() {

       setImageOne();           
          $(this).addClass('selected');
          $('#button2').removeClass('selected');
          $('#button3').removeClass('selected');
      });

  $("a#button2").click(function() {

       commObj();
          $(this).addClass('selected');
          $('#button1').removeClass('selected');
          $('#button3').removeClass('selected');
      });

  $("a#button3").click(function() {

           comProg();
          $(this).addClass('selected');
          $('#button1').removeClass('selected');
          $('#button2').removeClass('selected');
       });
 });

function setImageOne() {
  $('#imageSwap').fadeIn(500).html('<img src="slide1.png" />');   
}


function commObj() {
  $('#imageSwap').fadeIn(500).html('<img src="co.png" />');
}


function comProg() {
  $('#imageSwap').fadeIn(500).html('<img src="bo2.png" />').delay(2000).fadeOut(500, function () { comProg2(); });
}
function comProg2() {
  $('#imageSwap').fadeIn(500).html('<img src="bo2.png" />').delay(2000).fadeOut(500, function () { comProg3(); });
}
function comProg3() {
  $('#imageSwap').fadeIn(500).html('<img src="bo2.png" />').delay(2000).fadeOut(500, function () { comProg4(); });
}
function comProg4() {
  $('#imageSwap').fadeIn(500).html('<img src="bo2.png" />').delay(2000).fadeOut(500,           function () { comProg(); });
}

</script>

【问题讨论】：

标签： javascript jquery click

【解决方案1】：

这是因为您所有的 comProg 函数都有一个回调函数，该回调函数调用 comProg 函数，因此动画将每 2 秒运行一次。

顺便说一句，您可以编写comProg2 而不是function () { comProg2(); }，尽管您的所有comProg 函数都是相同的，您可以只使用一个函数并使用一个回调来调用相同的函数而不是下一个执行相同操作的函数。 ..

【讨论】：

感谢您的解释 - jQuery 新手，非常感谢所有建议！

【解决方案2】：

查看 jquery 动画队列http://api.jquery.com/queue/

【讨论】：

【解决方案3】：

添加类似的东西

$('#imageSwap').clearQueue();

在按钮 1 和按钮 2 的回调处理程序中停止无限动画。

见http://api.jquery.com/clearQueue/

【讨论】：