在“等待服务器”时运行 jquery 或 javascript 函数

Question

我有一个使用最少 AJAX 的 asp.net MVC 应用程序。在服务器响应 HTML 和数据之前，我有一些页面需要大量的数据库工作。

根据请求的目的和用户拥有的记录数，用户单击按钮或链接（可能是 GET、POST、href、表单提交等）后可能会有几秒或更长时间的延迟，浏览器已提交请求并正在旋转等待响应，但尚未加载新页面，因为服务器尚未返回任何内容。

因此，使用document.ready 和window.load 等不是触发加载微调器的解决方案。我需要在向服务器发出请求后立即启动的东西。

此外，使用类似的东西

 $(document).click(function () {//start loading spinner here}

也不会起作用，因为到处都有可以与之交互但不发出服务器请求的元素（即引导导航面板等）

我需要实现一个加载微调器（或类似的指示工作正在完成并且响应即将到来的东西），当服务器发出请求并且浏览器正在“等待来自服务器的响应”时运行。

更新 - 我尝试过的事情：

这将在需要时触发 loading.js 中的加载微调器插件，但在不需要时也会触发它，例如与引导 UI 元素交互时等。

$(document).click(function () {
    //Start loading.js anytime a button is clicked
    //Show full page LoadingOverlay
    $.LoadingOverlay("show");
});

这不起作用，因为一旦服务器返回响应（这是长延迟所在），浏览器只剩下几分之一秒来呈现 HTML 并显示视图。

$(document).ready(function () {
// Show full page LoadingOverlay
$.LoadingOverlay("show");
});

$(window).on(load, function () {
    //Stop loading.js after page loads
    $.LoadingOverlay("hide");
});

Answer 1

如果这些是整页刷新，那么您无能为力。该页面尚未加载，因为服务器实际上尚未返回任何内容。所以没有 html、javascript 和 CSS 来显示任何东西。

其他慢速/大型网站通常处理此问题的方式是加载没有数据的页面，然后通过 AJAX 发出单独的数据请求。这个过程有时被称为“再水化”页面。

使用像 VueJS 这样的数据绑定视图模型是个好主意，因为它可以轻松地使用返回的数据填充模板。

Answer 2

您可以简单地假设，一旦您的页面加载完毕，您就想显示一个加载微调器。然后你只会在一个或多个事件完成时隐藏它。

• 创建一个始终显示在页面上的元素，其中包含加载微调器图像
• 专门创建一个类来隐藏微调器（例如：.hide-spinner）
• 将您的 jquery $.ajax() 调用封装在一个函数中（例如：fetch(url)）
• 在函数内部，让 jQuery 删除 .hide-spinner 类
• 在你的 .always() 处理程序中再次添加 .hide-spinner 类
• 从函数返回 ajax 承诺，以便您可以继续从返回的结果链接承诺处理程序

您现在可以从应用程序中的任何位置调用该函数并获取您需要的数据，它总是会在启动时显示微调器，并在完成时隐藏它。

Answer 3

$("form").submit(function () {
  $('#loader').addClass("before").removeClass("after hide");
});
$(document).ready(function () {
  $("#loader").addClass("hide");
});
$(document).ajaxStart(function () {
  $("#loader").addClass("before").removeClass("after hide");
}).ajaxStop(function () {
  $("#loader").addClass("hide");
});
.before, .after{
  display:none;
  width: 50px;
  height: 20px;
  position:absolute;
  bottom: 10px;
  right: 10px;
}
.hide{
  display:none;
}
.show{
  display:block;
}

希望这对您有所帮助。