Автоматические циклы функций JavaScript

Question

У меня есть две функции, чтобы четко объяснить, что я имею в виду.

Функция 1
В этой функции, если вы наведите указатель мыши на квадрат, он начнет переход для переключения класса. Однако, если вы перемещаете мышь с элемента, а затем снова включаете, пока функция все еще идет, она будет ждать завершения функции, тогда она автоматически повторит функцию. Пока это повторение происходит, объект не является неразрешимым. Например, пока он повторяется, если вы наводите на него курсор, он не останется в стороне, он будет ждать, пока функция не закончится, а затем повторите еще раз, потому что вы зависали над ним. Затем он позволит вам навешивать элемент и взаимодействовать с ним.

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

Функция 2
В этой функции при нажатии на площади начнет переход либо добавления или удаления класса, однако, если вы должны были нажать на площади перед переходом закончился, то функция будет ждать завершения перехода, тогда он автоматически начнет снова переключать класс. Если вы нажмете на него пять раз подряд, то он будет переключать класс 5 раз подряд один за другим.

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

Вопрос
Есть ли способ, чтобы сделать эти функции прерываемой?

Так что для Function 1, если бы вы перестали нависнуть над элементом на полпути через переход, он начнет автоматически удалять класс, или если вы должны нависнуть над ним, в то время как переход для удаления класса продолжался, тогда он начните добавлять класс еще до завершения удаления класса. И для Function 2, если бы вы нажмете элемент на полпути через переход к переключению класса, тогда он начнет снова переключать класс, а не заканчивать исходный переход.

Редактировать
Как уже упоминалось в комментариях ниже А. Вольфа есть jQuery функция называется stop однако, как вы можете видеть в этой одной из JSFiddle это не очень эффективно, как stop(true) не работает и stop(true, true)/stop(true, true, false) практически работать, однако они оба подпрыгивают до конца анимации, и они оба смуты.

Любой способ это исправить или улучшить эффективность stop() будет оценена

Answer 1

Хитрости здесь, чтобы проверить 2 вещи:

1. Если элемент еще анимируемая в то время как другое событие вызывает
   Это очень распространенная практика при использовании анимации jQuery, что триггер с событий
2. Если элемент ent все еще находится в курсе (или больше не зависает) в конце анимации, если это не так, установите его в правильное состояние
   Это специальный случай для зависания анимаций или других анимаций, которые могут застрять в неправильном состояние в связи с «все еще анимированный» проверить

Если вы не проверить эти 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); }); 
});