多个 ajax 调用和过多的并发进程

Question

我有 3 个 ajax 调用，按设定的时间间隔，因此它们会在后台定期更新用户通知。我最近不得不禁用它，因为它导致了太多的并发进程并杀死了我们共享主机上的站点。

我喜欢下面的功能，但我想知道我是否可以以更经济的方式做到这一点，例如将它们嵌套在回调中。所以一个在下一个开始之前完成。

问题是，定期执行多个 ajax 调用的最佳方法是什么？

 setInterval(function() {
        // check who is online
        $(".whosOnline").load("ajax/whosOnline.php", function(data) {});
        // check for new messages
        $.ajax({
            url: 'ajax/message-count.php',
            type: "POST",
            success: function(data) {
                $(".MessageCountContainer").html(data);
            }
        });
        // check for new notifications
        $.ajax({
            url: 'ajax/notification-count.php',
            type: "POST",
            success: function(data) {
                $(".NotificationCountContainer").html(data);
            }
        });
    }, 15000);

Answer 1

你可以在前一个请求的回调中调用下一个 ajax 请求，如下所示：

setInterval(function() {
        // check who is online
        $(".whosOnline").load("ajax/whosOnline.php", function(data) {
            // check for new messages
            $.ajax({
                url: 'ajax/message-count.php',
                type: "POST",
                success: function(data) {
                    $(".MessageCountContainer").html(data);
                    // check for new notifications
                    $.ajax({
                        url: 'ajax/notification-count.php',
                        type: "POST",
                        success: function(data) {
                            $(".NotificationCountContainer").html(data);
                        }
                    });
                }
            });     
        });
}, 15000);

但是，我认为在服务器端将三个调用连接在一起并以 json 格式放置结果更容易、更高效。然后客户端你可以像这样使用它：

setInterval(function() {
    $.ajax({
        url: 'ajax/get-all-notification.php',
        type: "POST",
        dataType : "json",
        success: function(data) {
            $(".MessageCountContainer").html(data.MessageCountContainer);
            $(".NotificationCountContainer").html(data.NotificationCountContainer);             
        }
    });
}, 15000);

Answer 2

尝试

var timeout = null;
var _notifications = true;
// check who is online
var a = function() {
  return $(".whosOnline").load(url, function(data) {}).promise()
};
// check for new messages
var b = function() {
  return $.ajax({
    url: url,
    type: "POST",
    success: function(data) {
      $(".MessageCountContainer").html(data);
    }
  })
};
// check for new notifications
var c = function() {
  return $.ajax({
    url: url,
    type: "POST",
    success: function(data) {
      $(".NotificationCountContainer").html(data);
    }
  })
};
var count = 0;
var notifications = function notifications() {    
  return $.when(a()).then(b).then(c).then(function() {
    ++count;
    console.log(count);
    // stop `notifications`
    // if (count === 5) {
    //  clearTimeout(timeout);
    //  _notifications = false;
    // };
    timeout = setTimeout(function() {
      if (_notifications !== false) {
          notifications()
      };
    }, 15000)
  })    
};
notifications();

var timeout = 0;
var _notifications = true;
var url = "https://gist.githubusercontent.com/guest271314/6a76aa9d2921350c9d53/raw/49fbc054731540fa68b565e398d3574fde7366e9/abc.txt";
    // check who is online
    var a = function() {
      return $(".whosOnline").load(url, function(data) {}).promise()
    };
    // check for new messages
    var b = function() {
      return $.ajax({
        url: url,
        type: "GET",
        success: function(data) {
          $(".MessageCountContainer").html(data);
        }
      })
    };
    // check for new notifications
    var c = function() {
      return $.ajax({
        url: url,
        type: "GET",
        success: function(data) {
          $(".NotificationCountContainer").html(data);
        }
      })
    };
    var count = 0;
    var notifications = function notifications() {
      return $.when(a()).then(b).then(c).then(function() {
        ++count;
        console.log(count);
         if (count === 5) {
          clearTimeout(timeout);
          _notifications = false;
         };
        timeout = setTimeout(function() {
          if (_notifications !== false) {
              notifications()
          };
        }, 15000)
      })
    };
    notifications();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="whosOnline"></div>
<div class="MessageCountContainer"></div>
<div class="NotificationCountContainer"></div>