javascript - 检查互联网连接的最佳方法是什么

Question

我制作了一个 CMS，它在运行期间会提取大量数据。 CMS 使用 PHP、MySQL、jQuery、Bootstrap 制作并使用 AJAX。

问题是，如果您失去互联网连接，可能会导致显示和滚动出现问题。

如果有一个很好的方法来显示错误并在没有互联网连接时阻止网站上的所有功能，我会很高兴。建立连接后，网站上应允许所有功能。

谢谢!

(抱歉我的英语不好。)

Answer 1

如果你正在使用 jQuery，你可以 Hook global error handler并在发生错误时锁定您的应用程序。锁定屏幕可以简单地要求重试。

$( document ).ajaxError(function() {
  // lock your UI here
});

此外，一旦 UI 被锁定，您可以执行一个函数，在 Exponential Backoff 中对您的服务器执行 ping 操作。时尚并在网络恢复时自动解锁应用程序。

使用 jQuery 的 blockUI 可以轻松锁定您的应用程序插件。

例子

(function ($) {
  var locked = false;
  var errorRetryCount = 0;
  var blockUiOptions = { message: "Oops! Could not reach the server!" };

  // change this function to adjust the exponential backoff delay
  function backoff(n) {
    return Math.pow(2, n) * 100;
  }

  $(function () {
    $( document ).ajaxError(function () {
      var req = this;

      errorRetryCount += 1;

      if (!locked) {
         locked = true;
         $.blockUI(blockUiOptions);
      }

      // retry to send the request...
      setTimeout(function () { $.ajax(req); }, backoff(errorRetryCount));
    }).ajaxSuccess(function () {
      locked && $.unblockUI();
      locked = false;
      errorRetryCount = 0;
    });
  });
})(jQuery);

注意:您可能不希望在网络出现故障时无限期地重试您的请求，并且希望在某个时刻停止重试。由于这超出了这个问题的范围，我将保持原样。但是，您可以看看 this related question ，这可能会帮助您理清这部分内容。