javascript - 如果 Ajax 调用时间少于 200 毫秒，则 jQuery fadeOut() 会覆盖 fadeIn()

Question

我有以下 HTML、CSS 和 Javascript:

HTML

<p id="loading">Loading...</p>
<div id="my-box"></div>
<input type="button" id="my-button" value="Click" />

CSS

#loading {
    display: none;
}

Javascript

$("#my-button").click( function() {

    $.ajax({
        type: 'POST',
        url: '/echo/html/',
        data: {html: "<p>Text echoed back to request</p>"},
        delay: 0,

        beforeSend: function(xhr) {

            $('#loading').fadeIn('fast', function() {
                $('#my-box').fadeOut();
            });

        },

        success: function(html){

            $('#my-box').stop(true, true).html(html).fadeIn('slow', function(){
                $("#loading").fadeOut("fast");
            });
        }
    });
});

有一个JSFiddle here在这里。

问题是，如果 ajax 调用执行时间少于 200 毫秒，fadeOut() 会覆盖 fadeIn()，并且 #my-box 变得不可见而不是可见。

我不知道是什么原因造成的。任何帮助将非常受欢迎。

Answer 1

对于 fadeOut() 和 fadeIn()，您应该在成功中使用相同的序列

success: function (html) {
    $('#loading').fadeOut('fast', function () {
        $('#my-box').html(html).fadeIn();
    });
}

DEMO