阻止其他功能在所选功能之后运行

Prevent other functions running after selected function

本文关键字：功能 之后 运行 其他      更新时间：2023-09-26

我有一个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>

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

顺便说一句，你可以写comProg2而不是function () { comProg2(); }，尽管你所有的comProg函数都是一样的，你可以只使用一个函数，然后使用一个回调来调用同一个函数而不是下一个做同样事情的函数。。。

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

添加类似的内容

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

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

请参阅http://api.jquery.com/clearQueue/

相关文章：