javascript - 關於jq的one方法，以及animationed事件的問題

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');
        })
    }

寫的一個連續的動畫事件，加入一次事件監聽。這個動畫執行完畢，透過新增類，執行下一個動畫。現在的問題是，只有第一個flip的事件監聽是在動畫執行完畢之後觸發的，後續的事件監聽，在動畫執行開始的時候就被觸發了。不得其解，求大佬拯救。

Answer 1

把alert語句換成console語句，盡量不要使用alert語句查看資訊。