javascript - .text() 立即被处理

Question

我不知道该给什么标题，所以请我道歉，我只是很好奇为什么在下面的代码中，文本在淡出之前就被改变了，即使我把它放在淡入之后。

$('form').submit(function(){
    return false;
});
$('button').on('click',function(){
    $(this).addClass('busy');
    $(this).parent().find('button').attr('disabled',true);
    $(this).parent().find("button:not('.busy')").fadeOut(500);
    $('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});
$('p').on('sfsfsf',function(e,data){
    //this line below
    $(this).delay(1000).fadeOut(500).text('Complete!');
    $(this).fadeIn(500,function(){
        $(this).delay(500).fadeOut(500);
    });
});

http://jsfiddle.net/v4nwQ/

为什么会这样，我该如何解决？

Answer 1

因为fadeOut()在动画完成之前立即返回； text() 然后立即得到处理。您应该更改 fadeOut() 回调中的文本；

$(this).delay(1000).fadeOut(500, function () {
    $(this).text('Complete!');
});

不相关，但需要注意；您应该查看缓存 $(this) 的结果；你经常这么调用它。

$('p').on('sfsfsf',function(e,data){
    var self = $(this);

    self.delay(1000).fadeOut(500, function () {
        self.text('Complete!');
    });

    self.fadeIn(500,function(){
        self.delay(500).fadeOut(500);
    });
});