Question

我正在使用bootstrap和javascript

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

当用户点击LinkButton时，我希望进度条运行。刷新页面时完成进度条。

问题是这个栏不是实时的。 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 + '%';
              }
          }
}

Answer 1

TL; DR：你必须使用AJAX。

您使用的方法实际上无法解决您的问题。在发出不是XMLHTTPRequest的HTTP请求后，您无法在UI中执行任何操作，因为它会导致页面上的渲染阻塞，因为它是同步的。

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

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

数字1根本不会提供所需的效果，因为如果您在点击时为加载栏设置动画，然后在达到100％后开始HTTP请求，则在实际请求之前，您的加载栏动画已完成，这打破了装载栏的全部目的。

这意味着你需要使用AJAX。

如果您想了解更多关于为什么在没有AJAX的情况下不适合您的原因watch this video。

简而言之，浏览器停止渲染（绘制）屏幕中的任何内容，因为它被另一个操作阻止，在这种情况下，您将成为同步HTTP请求。因此，在进行同步HTTP请求时，由于绘图被浏览器阻止，因此不能为动画加载动画。

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

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

1 个答案: