javascript - How to stop an event immediately after it has finished executing

Question

I have a mouse move-in and move-out show-hidden event, but if the mouse slides over multiple times, it will be executed multiple times. How can I stop the event immediately after the mouse move-out event is executed?

$(".target").on('mouseenter',function() {
    $(this).children('.p1').show(function(){
        $(this).addClass('animated fadeInLeft');
        $(this).removeClass('animated fadeInLeft');
    })
});
$(".target").on('mouseleave',function() {
    $(this).children('.p1').hide(function(){
        $(this).addClass('animated fadeOutLeft');
        $(this).removeClass('animated fadeOutLeft');
    })
});

Answer 1

If you want to use a method that only executes once, just use .one(). However, in general, jQuery animation special effects must consider the animation queue. It is recommended to add .stop() before executing the animation. Method to stop animations that "enter the animation queue but are not completely executed"

Answer 2

$(".target").on('mouseenter',function() {
    $(this).children('.p1').show(function(){
        $(this).addClass('animated fadeInLeft');
        $(this).removeClass('animated fadeInLeft');
    })
});
$(".target").on('mouseleave',function() {
    $(this).children('.p1').hide(function(){
        $(this).addClass('animated fadeOutLeft');
        $(this).removeClass('animated fadeOutLeft');
    })
    $(this).unbind();    //加一句这个取消当前dom的所有绑定事件
});

Answer 3

Add an e after

on, and you can use .one()This API will automatically delete it once.

Reference

Answer 4

If you want to stop the animation immediately, use stop()

$(this).children('.p1').stop(true, true)

Answer 5

$(".target").off('mouseenter').on('mouseenter',function() {

$(this).children('.p1').show(function(){
    $(this).addClass('animated fadeInLeft');
    $(this).removeClass('animated fadeInLeft');
})

});
$(".target").off('mouseenter').on('mouseleave',function() {

$(this).children('.p1').hide(function(){
    $(this).addClass('animated fadeOutLeft');
    $(this).removeClass('animated fadeOutLeft');
})

});