Let me illustrate my point with two functions.
Function 1
This function triggers a transition when you hover over the square. If you move your mouse off the element and then back on while the transition is still in progress, it will wait until the end of the function to repeat automatically. During this repetition, the object is non-interactive. For instance, if you hover over it while it's repeating, it will only toggle after completing the current cycle. Once finished, you can interact with the element again.
$(function () {
$('square').hover(function () {
$(this).addClass("makebig", 1000, "easeInBack");
}, function(){
$(this).removeClass("makebig", 1000, "easeInBack");
});
});
Function 2
When you click on the square in this function, it triggers a transition by adding or removing a class. If you click on the square before the previous transition ends, the function waits for completion before toggling the class again. Clicking multiple times consecutively will result in multiple class toggles one after the other.
$("square").click(function() {
$(this).toggleClass("big-blue", 1000, "easeOutSine");
});
The Question
Is there a way to make these functions interruptible?
In Function 1, can we stop hovering midway through to automatically remove the class? Similarly, in Function 2, can we interrupt the toggle transition by clicking again without waiting for the original transition to finish?
Edit
A user mentioned using the stop() function in jQuery to achieve interruption, but it has some limitations as seen in this JSFiddle. Any suggestions on improving the effectiveness of stop() would be helpful.