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

问题描述：

我有一个asp.net MVC应用程序，它使用最少的AJAX。在服务器响应HTML和数据之前，我有一些页面需要很多数据库工作。“等待服务器”时运行jquery或javascript函数

根据请求的内容和用户有多少条记录，用户点击按钮或链接后可能会有几秒或更长的延迟（可能是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"); 
});

到目前为止，你做了什么？ –

查找['beforeSend：函数（）{...}']（http://api.jquery.com/jquery.ajax/） –

我与'$（文件）。单击发挥各地（函数（） {//在这里开始加载微调器}'，并考虑了各种方法，我可以推断出所有页面上的不同按钮和链接类型，尽管这听起来非常混乱，并且想要了解是否有全局事件jquery或javascript可以绑定到浏览器的“等待响应”状态 – amartin

答

你可以简单地假设，只要你的页面加载，你想显示一个加载微调。那么只有当一个或多个事件完成时，你才会隐藏它。

创建一个总是在它显示在页面上的加载微调图像元素
创建一个类专门来隐藏微调（如：.hide-spinner）
包装一个函数内部的jQuery $.ajax()通话（如：fetch(url)）
在这个函数中，有jQuery的删除.hide-spinner类
在对承诺的.always()处理程序重新添加.hide-spinner类
返回从功能阿贾克斯的承诺，这样就可以从返回的结果

现在，您甚至可以从应用程序中的任何地方，功能，把你需要的数据继续链的承诺处理程序，它永远会在启动时显示微调器，并在完成时将其隐藏。

我需要装载微调尽快做出请求。一旦我有了之前的服务器响应它的几分之一秒显示其渲染和微调不再需要。这些是整页刷新而不是AJAX调用。 – amartin

@amartin我已经写了关于整页刷新的新答案。 – Soviut

答

$("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; 
}

希望这可以帮助你。

谢谢，但我没有使用AJAX。这些是整页刷新。 – amartin

这适用于两个@amartin。我已经在使用它。 – iMatoria

答

如果这些都是整页刷新，有没有什么可以做。该页面尚未加载，因为服务器没有返回任何内容。所以没有html，javascript和没有CSS来显示任何东西。

其他慢/大型网站通常处理这个问题的方法是通过加载网页时没有数据，则使通过AJAX一个单独的数据请求。这个过程有时被称为“补水”页面。

使用数据绑定视图模型像VueJS因为它使填充与返回的数据容易的模板将是一个不错的主意。

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

相关推荐