Javascript异步功能

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()在脚本的其他部分中调用函数而不需要任何参数.