JavaScript 函数自动循环

Question

我有两个函数可以清楚地解释我的意思。

函数 1
在此函数中，如果您将鼠标悬停在正方形上，它将开始切换类的过渡。但是，如果您将鼠标从元素上移开，然后在该功能仍在运行时重新打开，它将等到该功能完成，然后它将自动重复该功能。当这种重复发生时，该对象是非难处理的。例如，当你将鼠标悬停在它上面时它会重复，它不会停留在外面，它会等到功能结束然后再重复一次，因为你将鼠标悬停在它上面。然后它将允许您将鼠标悬停在元素上并与之交互。

$(function () {
    $('square').hover(function () {
        $(this).addClass("makebig", 1000, "easeInBack");
    }, function(){
        $(this).removeClass("makebig", 1000, "easeInBack");
    });
});

函数 2
在此函数中，当您单击正方形时，它将开始添加或删除类的转换，但是如果您在转换之前单击正方形ended 然后该函数将等待转换结束，然后它将自动开始再次切换类。如果您连续点击它 5 次，它就会连续 5 次切换类别。

$("square").click(function() {
    $(this).toggleClass("big-blue", 1000, "easeOutSine");
});

问题
有没有办法让这些函数可以中断？

因此，对于 Function 1，如果您在过渡期间停止将鼠标悬停在元素上，它将开始自动删除该类，或者如果您在过渡期间将鼠标悬停在该元素上以删除类正在进行然后它将在删除类转换完成之前再次开始添加类。对于 Function 2，如果您在切换类的过渡过程中单击元素，它将再次开始切换类，而不是完成原始过渡。

编辑
正如 A. Wolff 在下面的评论中提到的，有一个名为 stop 的 jQuery 函数，但是您可以看看你JSFiddle它不是很有效，因为 stop(true) 不起作用并且 stop(true, true)/stop(true, true, false)几乎可以工作，但是它们都跳到动画的末尾并且它们都出现故障。

任何解决此问题或提高 stop() 有效性的方法将不胜感激

Answer 1

这里的技巧是检查两件事:

1. 如果在另一个事件触发时元素仍在动画
   这是使用 jquery 动画时非常常见的做法 由事件触发
2. 如果元素在动画结束时仍在悬停(或不再悬停)，如果不是，则将其设置为正确的状态
   这是悬停动画或其他动画的特殊情况，这些动画可能由于“仍在动画中”检查而陷入错误状态

如果您不检查这两件事，jquery 将在您将鼠标悬停在元素内外时继续排队动画

这应该有效:https://jsfiddle.net/sf5q4jv0/10/

我已经让“点击”动画在另一个开始时停止，而“悬停”动画在能够排队新动画之前完成，但请记住上面的 2 条规则应该很容易制作动画随心所欲的元素

$(function () {
     $('a[href*="#"]').click(function () {
         if($('html,body').data("anim")){
             $('html,body').stop();
         }
         $('html,body').data("anim", true);
         var $target = $(this.hash);
         $target = $target.length ? $target : $('html');
         var targetOffset = $target.offset().top;
         $('html,body').animate({scrollTop: targetOffset}, {duration: 1500, easing: 'easeInOutCubic'}, 
         function(){
             $('html,body').data("anim", false);
         });
         return false;
     });
});

/*Important Part*/
$(function () {
function hoverIn(element) {
  if(!$(element).data("anim")) {
    $(element).data("anim", true);
        $(element).addClass("hover", 1000, "easeOutBounce", function(){
        $(element).data("anim", false);
      //if it's not hovered anymore it will remove the class
      if(!$(element).is(":hover")) {
        hoverOut(element);
      }
    });
    }
}

function hoverOut(element) {
  if(!$(element).data("anim")) {
    $(element).data("anim", true);
        $(element).removeClass("hover", 1000, "easeOutBounce", function(){
        $(element).data("anim", false);
      //if it's not hovered anymore it will remove the class
      if($(element).is(":hover")) {
        hoverIn(element);
      }
    });
    }
}
    $('nav').hover(function(){hoverIn(this); }, function() {hoverOut(this); });
});