如何配置进度条以指示搜索查询进度？ [复制]

Question

我正在使用引导程序和 javascript

我有一个搜索栏。用户可以输入关键字并点击“搜索按钮”（LinkedButton）。在后端，我使用 VB asp.net 编写查询并搜索数据库。在该页面刷新后，新结果将显示在页面上。

用户点击 LinkBut​​ton 后，我希望进度条运行。页面刷新时进度条完成。

问题是这个栏不是实时的。我正在增加进度，但使用宽度变量（静态）。

如何将这个 javascript 的“移动”功能变成实时进度条？

<asp:LinkButton  ID="AdvSearchB" runat="server">Search</asp:LinkButton>

<div id="myProgress" style="width: 100%; background-color: #ddd;">
<div id="myBar" style="  width: 0%;height:3px;" class="progress-bar-danger" role="progressbar"></div>
</div>


<script>
$(document).ready(function () {
    $('.AdvSearchBC').click(function () {
        move();
    });
});

function move() {
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
        function frame() {
            if (width >= 100) {
                  clearInterval(id);
              } else {
                  width++;
                  elem.style.width = width + '%';
              }
          }
}

Answer 1

TL；DR：您必须使用 AJAX。

您所采取的方法实际上无法解决您的问题。一旦发出非 XMLHTTPRequest 的 HTTP 请求，您将无法在 UI 中执行任何操作，因为它是同步的，因此会导致页面上的渲染阻塞。

您有两种可能的解决方案：

1. 在用户单击按钮和发出请求之间添加时间间隔
2. 使用 AJAX

数字 1 根本不会给您想要的效果，因为如果您在点击时为加载栏设置动画，然后在达到 100% 后开始 HTTP 请求，那么在实际发出请求之前，您的加载栏动画就完成了，这违背了拥有加载栏的全部目的。

这意味着您需要使用 AJAX。

如果您想进一步了解为什么没有 AJAX 这对您不起作用，watch this video。

简而言之，浏览器会停止渲染（绘制）屏幕中的任何内容，因为它被另一个操作阻止了，在这种情况下，您将看到同步 HTTP 请求。因此，在发出同步 HTTP 请求时，由于浏览器阻止了绘画，因此无法为加载栏设置动画。

如果您想自己测试一下，请在您的页面上添加一个按钮，该按钮请求一个需要很长时间才能加载的页面。在加载本机浏览器微调器时，您将无法单击页面上的任何其他内容，因为渲染被阻止。在这种情况下，您无法为加载栏设置动画的原因正是同样的阻塞。