javascript - Comment arrêter un événement immédiatement après la fin de son exécution

Question

J'ai un événement qui s'affiche et se cache lorsque la souris entre et sort. Cependant, si la souris glisse plusieurs fois, il sera exécuté plusieurs fois. Comment puis-je arrêter l'événement immédiatement après l'exécution de l'événement de sortie de la souris ?

$(".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

Si vous souhaitez utiliser une méthode qui ne s'exécute qu'une seule fois, utilisez la méthode .one()就行，但是一般jQuery的动画特效一定要考虑动画队列的问题，建议在执行动画之前加上.stop() pour arrêter l'animation qui "entre dans la file d'attente d'animation mais n'est pas complètement exécutée"

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

Ajoutez un e après

on, et si vous utilisez .one()cette API, elle la supprimera automatiquement une fois.

Référence

Answer 4

Si vous souhaitez arrêter l'animation immédiatement, utilisez 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');
})

});