Загрузка функций jQuery по одному

Question

У меня есть два разных function() и скрыть сообщение для загрузки.

function functionOne(){ 
    $.get(baseURL + 'xml/', function(one) { 
     ... 
    }); 
} 

function functionTwo(){ 
    $.get(baseURL + 'xml/', function(one) { 
     ... 
    }); 
} 

function hideLoading(){ 
    $('#loading').fadeOut('slow', function() { 
     $('#loading').hide(); 
    }); 
} 

Теперь, что я пытаюсь сделать, это загрузить их по одному. Поэтому я хочу позвонить functionTwo после загрузки functionOne и hideLoading после загрузки functionTwo. Этот бит кода не работает, потому что она скрывает сообщение загрузки перед functionOne и functionTwo загружен:

$('.featuredImage').live('click', function() { 
    functionOne(); 
    functionTwo(); 
    hideLoading(); 
}); 

Кто-нибудь может мне помочь с этим?

Answer 1

Это потому, что Ajax является Асинхронный, вы должны вызывать функции в функции обратного вызова Аякса. Также обратите внимание, что метод live устарел, вы можете использовать метод on.

$(document).on('click', '.featuredImage', functionOne); 

function functionOne(){ 
    $.get(baseURL + 'xml/', function(one) { 
     functionTwo(); 
    }); 
} 

function functionTwo(){ 
    $.get(baseURL + 'xml/', function(one) { 
     hideLoading(); 
    }); 
} 

Answer 2

Добавьте следующую функцию в конце обратного вызова

function functionOne(){ 
    $.get(baseURL + 'xml/', function(one) { 
     ... 
    functionTwo(); 
    }); 
} 

Answer 3

$.get() возвращает Promise-совместимый объект jqXHR.

Возвращаясь к jqXHRs из functionOne() и functionTwo() позволит сформировать .then() цепь следующим образом:

function functionOne(){ 
    return $.get(baseURL + 'xml/');//returns a jqXHR object 
} 

function functionTwo(){ 
    return $.get(baseURL + 'xml/');//returns a jqXHR object 
} 

function hideLoading() { 
    $('#loading').fadeOut('slow'); 
} 

$(document).on('click', '.featuredImage', function() { 
    functionOne().then(functionTwo).then(hideLoading); 
}); 

Делая это таким образом держит functionOne() и functionTwo() свободен от предположений о том, что должно произойти дальше. Вся логика последовательности находится в вызывающей функции.

Обратные вызовы могут быть повторно вставлены в выражения $.get(). Если они не вызовут непустую ошибку, они не будут препятствовать последовательности.