jQuery函数执行时如何显示加载进度条？

Question

我们想在执行 jQuery 代码时显示加载进度条，但是在执行 jQuery 代码后才显示进度条。

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

$(window).load(function() {
  $('#loading').hide();
});

$("[id*=btnAddCa_Cl]").click(function() {

  var ttlCationCaco3 = $("input[id$='txtTdsAdjustmentForCation']").val();
  if (parseFloat(ttlCationCaco3) > 0) {
    $("input[id$='txtCalciumPpmAsCaCO3']").val(parseFloat($("input[id$='txtTdsAdjustmentForCation']").val()) + parseFloat($("input[id$='txtCalciumPpmAsCaCO3']").val()));
    $("input[id$='txtCalciumPpmAsCaCO3']").trigger('keyup');
  } else {
    $("input[id$='txtChloridePpmAsCaCO3']").val(parseFloat($("input[id$='txtTdsAdjustmentForAnion']").val()) + parseFloat($("input[id$='txtChloridePpmAsCaCO3']").val()));
    $("input[id$='txtChloridePpmAsCaCO3']").trigger('keyup');
  }

});

Answer 1

从问题下的评论来看，您似乎希望加载微调器图形（注意：不是进度条，两者在行为上非常不同）出现，而您long-运行宁化学相关计算运行。

您在这里遇到的问题是计算是一个同步过程，并且会阻止 DOM 在进行过程中进行更新。要解决此问题，您可以将计算逻辑置于具有非常短延迟的超时内，以便为 DOM 提供一些时间来更新而不阻止 UI 被修改。因此，试试这个：

let $loading = $('#loading');
let $calcPpmAsCao3 = $("input[id$='txtCalciumPpmAsCaCO3']");
let $chloridePpmAsCao3 = $("input[id$='txtChloridePpmAsCaCO3']");

let ttlCationCaco3 = parseFloat($("input[id$='txtTdsAdjustmentForCation']").val());
let ttlAnionCaco3 = parseFloat($("input[id$='txtTdsAdjustmentForAnion']").val());


$("[id*=btnAddCa_Cl]").click(function() {
  $loading.show();

  setTimeout(function() {
    // calculation logic here \/ \/ \/        

    if (ttlCationCaco3 > 0) {
      $calcPpmAsCao3.val(function(i, v) {
        return parseFloat(this.value) + ttlCationCaco3;
      }).trigger('keyup');
    } else {
      $chloridePpmAsCao3.val(function(i, v) {
        return parseFloat(this.value) + ttlAnionCaco3;
      }).trigger('keyup');
    }

    // calculation logic here /\ /\ /\        

    $loading.hide();
  }, 10);
});

#loading {
  display: none;
}

在此示例中有几点需要注意。首先访问 DOM 是你可以在 JS 中做的（相对）最慢的事情之一。因此，值得采取措施减少执行此操作的次数。如果你需要多次引用一个元素，'cache' 它在一个变量中。

此外，对值调用一次 parseFloat() 并将其存储在变量中。那么你就不需要继续调用 parseFloat() 你已经可以访问的东西。

最后，我用CSS默认隐藏了#loading。不要在 JS 中这样做，因为该元素将在 JS 运行s 之前的一瞬间可见并隐藏它。 CSS先执行，速度更快，避免了这个问题。

jQuery函数执行时如何显示加载进度条？

How to display a loading progress bar when jQuery function is executing?

javascript

c#

asp.net

jquery

progress-bar