Question

我在理解如何/应该解决这个问题时遇到了问题。

我有两个功能。在第一个函数（我称之为loadData()）中，我正在向服务器发送异步请求以加载一些数据。

在第二个函数（saveData()）中，我还向服务器发出asyn请求以写入一些数据。在此请求的回调中，我正在调用loadData()来刷新数据。

现在出现问题：在saveData()函数中，我希望在显示对话框之前等待loadData()完成（如alert('Data saved')）

我想这是一个常见的问题，但我找不到它的解决方案（如果有的话......）

解决方案是使请求同步，但我正在使用的框架没有提供，我希望有更好的解决方案..

感谢所有人！

Answer 1

这些情况下的诀窍是嵌套“成功”回调，如下所示：

$.ajax({ 
   url: "/loadData", 
   success: function () {
      // Data Loaded... Save the data
      $.ajax({ 
         url: "/saveData", 
         success: function () {
            // Data Saved... Display alert
            alert('Data saved');
         }
      });
   }
});

如果您的loadData()函数看起来像这样：

function loadData() {
   .ajax({ 
      url: "/loadData", 
      success: function () {
         // Data Loaded... Process the data
      }
   });
}

...那么你可能想给它一个在成功回调返回之前调用的回调参数：

function loadData(myCallback) {
   .ajax({ 
      url: "/loadData", 
      success: function () {
         // Data Loaded... Process the data

         // ... Your Data Processing Logic ...

         // Invoke the callback (if one was passed):
         if (typeof myCallback === 'function') {
            myCallback();
         }
      }
   });
}

然后您就可以像这样实现saveData()函数：

function saveData() {
   loadData(function () {
       // Data Loaded (and processed by loadData())... Save the data
      .ajax({ 
         url: "/saveData", 
         success: function () {
            // Data Saved... Display alert
            alert('Data saved');
         }
      });
   });
}

您仍然可以在脚本的其他部分调用loadData()函数而不需要任何参数。

Answer 2

嵌套函数是一种解决方案，但在代码质量方面却是一个坏主意。您可能需要查看jquery延迟对象来解决它。

Deferred documentation

Javascript异步功能

2 个答案: