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

将下一个函数添加到回调结尾

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

Answer 2

那是因为Ajax是 Asynchronous ，你应该在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 3

$.get()返回符合Promise的jqXHR对象。

从functionOne()和functionTwo()返回jqXHR将允许您形成.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()表达式。如果它们不会引起未被捕获的错误，它们就不会抑制序列。

逐个加载jQuery函数

3 个答案: