Как я могу заставить jQuery load() завершиться до fadeOut / затухания?
Вопрос
Я хочу выполнить вызов AJAX через jQuery load() и только после того, как он вернется, затем удалить старое содержимое и удалить новое содержимое.Я хочу, чтобы старый контент оставался отображаемым до тех пор, пока не будет извлечен новый контент, после чего срабатывает функция fade Out / In .
Используя:
$('#data').fadeOut('slow').load('/url/').fadeIn('slow');
содержимое появляется и исчезает, и через несколько мгновений возвращается вызов load(), и данные обновляются, но исчезновение уже завершено.
Решение
Используйте обратные вызовы для управления порядком вызовов.
var $data = $('#data');
$data.fadeOut('slow', function() {
$data.load('/url/', function() {
$data.fadeIn('slow');
});
});
(Примечание:Я не уверен на 100% в том, использую ли var $data = ...
и $data.doStuff()
действительно будет работать - если это произойдет, это избавит вас от необходимости каждый раз искать div в дереве DOM, но если это не так, просто удалите первую строку и используйте $('#data')
повсюду...
Другие советы
Проблема связана с тем фактом, что все три функции 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 как встроенные анонимные функции.