加載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(); 
    }); 
} 

現在，我想要做的就是逐個加載它們。所以我想在加載functionOne後加functionTwo，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()返回兼容的承諾，jqXHR對象。

返回從functionOne()和functionTwo()的jqXHRs將讓你形成.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()表達式中。如果它們不會導致未被捕獲的錯誤被拋出，它們將不會抑制序列。