Как я могу заставить jQuery load() завершиться до fadeOut / затухания?

Question

Я хочу выполнить вызов AJAX через jQuery load() и только после того, как он вернется, затем удалить старое содержимое и удалить новое содержимое.Я хочу, чтобы старый контент оставался отображаемым до тех пор, пока не будет извлечен новый контент, после чего срабатывает функция fade Out / In .

Используя:

$('#data').fadeOut('slow').load('/url/').fadeIn('slow');

содержимое появляется и исчезает, и через несколько мгновений возвращается вызов load(), и данные обновляются, но исчезновение уже завершено.

Answer 1

Используйте обратные вызовы для управления порядком вызовов.

var $data = $('#data');
$data.fadeOut('slow', function() { 
    $data.load('/url/', function() { 
        $data.fadeIn('slow'); 
    }); 
});

(Примечание:Я не уверен на 100% в том, использую ли var $data = ... и $data.doStuff() действительно будет работать - если это произойдет, это избавит вас от необходимости каждый раз искать div в дереве DOM, но если это не так, просто удалите первую строку и используйте $('#data') повсюду...

Answer 2

Проблема связана с тем фактом, что все три функции fadeOut, load и fadeIn являются асинхронными.Каждая из вышеперечисленных функций принимает аргумент обратного вызова (функцию), который будет запущен, когда функция завершит выполнение.Например.

$('#data').fadeOut(functionToRunWhenFadeOutIsComplete);

//Если вы определили 'functionToRunWhenFadeOutIsComplete', она будет запущена после завершения fadeOut .

Вооружившись этими знаниями, теперь вы можете решить свою проблему.

var fadeInData = function fadeInData() { $('#data').fadeIn(); }
var loadData = function loadData() { $('#data').load('url', fadeInData); }
$('#data').fadeOut(loadData);

В качестве альтернативы вы можете определить loadData, fadeInData как встроенные анонимные функции.