Javascript 如何配置进度条以指示搜索查询进度？

我正在使用引导和javascript

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

一旦用户点击链接按钮，我希望进度条运行。刷新页面时，进度条完成

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

如何将此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 + '%';
              }
          }
}

搜索
$（文档）.ready（函数（）{
$（'.AdvSearchBC'）。单击（函数（）{
move（）；
});
});
函数move（）{
var elem=document.getElementById（“myBar”）；
var宽度=1；
var id=设置间隔（第10帧）；
函数框架（）{
如果（宽度>=100）{
清除间隔（id）；
}否则{
宽度++；
elem.style.width=宽度+'%'；
}
}
}

---

TL；DR：您必须使用AJAX。

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

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

在用户单击按钮和发出请求之间添加时间间隔

使用AJAX

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

这意味着您需要使用AJAX

如果您想更多地了解为什么没有AJAX，这将不适用于您

简而言之，浏览器停止渲染（绘制）屏幕中的任何内容，因为它被另一个操作阻止，在本例中，这将是同步HTTP请求。因此，在发出同步HTTP请求时，无法对加载条设置动画，因为浏览器会阻止绘制

---

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

将其改为“在搜索过程中设置进度条动画”不是更好吗？那么前端如何知道完成了多少进度呢？@proeviz，为了清晰起见，请随意编辑。SE就是这样工作的。可能是重复的。如果响应很大，我会使用fetch的

body.getReader（）

流来显示进度。当然，不要刷新页面谢谢，我不知道我必须使用ajax。这很有帮助。我将尝试使用jquery-ajaxNo-problem。但是您应该试着理解为什么需要使用AJAX。如果你不明白为什么，让我知道，我可以进一步解释。“为什么”非常重要，因此您可以理解，而不是仅仅获得正确的解决方案。：）