有没有办法通过＆＃34; .empty＆＃34;执行另一个功能？在jQuery中的功能？

Question

在这里查看我的代码

$('#UpdatesButton').click(function() {
    $('.content').fadeOut(200, function() {
        $(".content").empty(function() {
            $('.content').load('Pages/Updates.php', function() {
                $('.content').fadeIn(200);
            });
        });
    });
});

因为.empty（）不接受任何参数，我的代码在.empty函数为（https://api.jquery.com/empty/）的行上停止，我希望以某种方式继续执行.load和.fadeIn函数紧接着.empty完成它自己的执行，但似乎不可能，有没有替代方法来清空.content（这是一个DIV容器）？

Answer 1

你不需要回调空，简单链接会像

一样

$('#UpdatesButton').click(function() {
    var elem = $('.content');
    elem.fadeOut(200, function() {
        elem.empty().load('Pages/Updates.php', function() {
            elem.fadeIn(200);
        });
    });
});

但根据我的理解，您根本不需要empty()，.load()会更新内容

$('#UpdatesButton').click(function() {
    var elem = $('.content');
    elem.fadeOut(200, function() {
        elem.load('Pages/Updates.php', function() {
            elem.fadeIn(200);
        });
    });
});

Answer 2

这是微优化，但在淡出之前开始加载数据可以减少整体加载时间。此代码基本相同，但与fadeOut并行启动数据请求，并处理竞争条件。

• 在淡出之前加载数据时，代码不执行任何操作，因为元素仍处于动画状态，fadeOut回调将看到更新的data变量在动画之后，触发内容更新
• 如果数据在淡出后加载，则动画回调将因空数据变量而无效，但该元素将不再动画，并且AJAX回调将触发改为更新。

$('#UpdatesButton').click(function() {
    var $content = $('.content'),
        data;
    $.ajax({
        url: 'Pages/Updates.php',
        dataType: 'text',
        success: function(result){
            data = result;
            if (!$content.is(':animated'))
                $content.html(data).fadeIn(200);
        }
    });
    $content.fadeOut(200, function(){
        if (typeof data !== 'undefined')
            $content.html(data).fadeIn(200);
    });
});