javascript - Questions about jq's one method and animated events

Question

flip:function(){
        var self = this;
        
        self.element.addClass('flip');
        self.element.one('animationend.a',function(){
            alert(1);//这个时候动画已经执行完毕
            $(this).removeClass('flip');
            self.shuffle();
        })
    },
    shuffle:function(){
        var self = this;
        alert(1.1);//依旧会弹出
        self.element.addClass('shuffle');
        self.element.one('animationend.b',function(){ 
            alert(2);//动画刚要执行        
            $(this).removeClass('shuffle');
            self.deal();
        })
    },
    deal:function(){
        var self = this;
        alert(2.2);//依旧会弹出
        self.element.addClass('deal');
        self.element.one('animationend.c',function(){
            alert(3);//动画刚要执行
            $(this).removeClass('deal');
        })
    }

Write a continuous animation event and add an event listener. After this animation is executed, the next animation is executed by adding a class. The problem now is that only the first flip event listener is triggered after the animation execution is completed, and subsequent event listeners are triggered when the animation execution starts. I can't figure it out, so I asked the boss to save me.

Answer 1

Replace the alert statement with the console statement, and try not to use the alert statement to view information.