事件函数完整日历中的多个ajax调用

Question

我在我们的页面中使用fullcalendarjQuery插件来创建/查看会议邀请。

我的新要求是在我们的页面中显示在outlook中为特定用户创建的会议。我的网络服务（用于从outlook中提取会议）至少需要45秒才能发送回复。我不希望用户完全等待45秒。（性能问题）所以我只想先从数据库加载事件，然后再将返回的事件附加为webservice响应。因此用户不会感觉到太多的延迟。

因此，我只进行了两次ajax调用来提取所需的详细信息。一个ajax调用是从本地数据库中提取事件（SUCCESS），另一个调用是调用Web服务来提取在Outlook中创建的事件。

events: function(start, end, timezone,callback) {
            $.ajax({
                url:  // url hits db and gets meeting details in db
                dataType: 'json',
                success: function(response) {
                    var events = [];
               if(response != null){
                   alert("Success");
                    $.map(response ,function ( r ){
                       alert(r.title + " "  +  r.start + " " + r.end);
                      events.push({
                            title : r.title,
                            start : r.start,
                            end : r.end
                        });
                    });
               }    
               callback(events);
          }
          $.ajax({
                url:  // url calls webservice and gets meetings in Outlook
                dataType: 'json',
                success: function(response) {
                    var events = [];
               if(response != null){
                   alert("Success");
                    $.map(response ,function ( r ){
                       alert(r.title + " "  +  r.start + " " + r.end);
                      events.push({
                            title : r.title,
                            start : r.start,
                            end : r.end
                        });
                    });
               }    
               alert("External Events  "+ events.length);  //EXECUTED 
               callback(events);  //NOT EXECUTED
               }
        });
  }

现在的问题是，

1。第一个ajax调用运行良好。

2。我从Web服务获得了正确的响应，但该响应未附加到日历中。

我的问题是，

1. 我们不能使用回调（事件）两次吗？

2. 或者，请给我推荐另一种解决方案？

3. 如果我分别使用两个事件函数，则只执行第二个事件函数。为什么第一个事件函数没有被执行？

Answer 1

有点老，但有一种可供参考的方法。在您的第一个ajax调用中，而不是回调，放入第二个ajax调用

$.ajax({
            url:  // url hits db and gets meeting details in db
            dataType: 'json',
            success: function(response) {
                var events = [];
           if(response != null){
               alert("Success");
                $.map(response ,function ( r ){
                   alert(r.title + " "  +  r.start + " " + r.end);
                  events.push({
                        title : r.title,
                        start : r.start,
                        end : r.end
                    });
                });
           }    
           //second call
           $.ajax({
            url:  // url calls webservice and gets meetings in Outlook
            dataType: 'json',
            success: function(response) {
                var events = [];
           if(response != null){
               alert("Success");
                $.map(response ,function ( r ){
                   alert(r.title + " "  +  r.start + " " + r.end);
                  events.push({
                        title : r.title,
                        start : r.start,
                        end : r.end
                    });
                });
           }    
           alert("External Events  "+ events.length); 
           callback(events); // return all results 
           }
         });
      }

Answer 2

您的代码没有任何问题。确保您从服务器获得的响应是您所期望的（例如，response！=null）。

https://jsfiddle.net/5ds8z06p/

var foo = function(callback) {
  $.ajax({
    url: '/echo/json',
    success: function() {
      callback('first');
    }
  });
  $.ajax({
    url: '/echo/json',
    success: function() {
      callback('second');
    }
  });
};
foo(function(bar) {
  console.log(bar);
});