0

我有两个不同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();
});

有人可以帮我解决这个问题吗？

4

3 回答 3

2

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

function functionOne(){
   $.get(baseURL + 'xml/', function(one) {
      ...
     functionTwo();
   });
}
于 2013-03-02T09:10:32.350 回答
2

那是因为 Ajax 是异步的，你应该在 Ajax 的回调函数中调用这些函数。另请注意，live不推荐使用方法，您可以改用on方法。

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

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

function functionTwo(){
   $.get(baseURL + 'xml/', function(one) {
      hideLoading();
   });
}
于 2013-03-02T09:11:36.037 回答
1

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

functionOne()从和返回 jqXHRfunctionTwo()将允许您形成一个.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()表达式中。如果它们不会导致抛出未捕获的错误，它们将不会抑制序列。

于 2013-03-02T10:39:05.297 回答