Is there a way to execute another function by ".empty" function in jQuery?

Question

Look at my code here

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

Because .empty() don't accept any arguments, my code stops on the line where .empty function is (https://api.jquery.com/empty/), what I am wishing to do is to somehow continue execution of .load and .fadeIn functions right after .empty completed it's own execution, but it seems impossible, is there alternatives to empty the .content (which is a DIV container)?

.empty isn't asynchronous. Its execution happens synchronously. — Stryner
– Stryner, Commented Feb 3, 2016 at 19:48

Satpal · Accepted Answer · 2016-02-03 19:47:49Z

2

You don't need callback for empty, Simple chaining will do like

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

However as per my understanding You don't need empty() at all, .load() will update the content

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

answered Feb 3, 2016 at 19:47

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Over a year ago

Thanks, didn't know about chaining, .load is good, but sometimes it's won't force to empty the container which can gather some symbols and other mess :(

SeinopSys · Accepted Answer · 2016-02-03 20:04:31Z

It's a micro optimization, but starting to load the data before fade out can cut down on the overall loading time. This code does essentially the same, but starts the request for the data in parallel with the fadeOut, and it handles race conditions.

When the data is loaded before the fade out, the code does nothing, as the element is still animated, and the fadeOut callback will see the updated data variable after the animation, triggering the content update
If the data loads after the fade out, the animation callback will do nothing because of the empty data variable, but the element won't be animated any more, and the AJAX callback will trigger the update instead.

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

Collectives™ on Stack Overflow

Is there a way to execute another function by ".empty" function in jQuery?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related