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

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

您在这里遇到的问题是计算是一个同步过程，并且会阻止 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 中可以做的（相对）最慢的事情之一。因此，值得采取措施减少执行此操作的次数。如果您需要多次引用一个元素，请将其“缓存”在一个变量中。

另外，对一个值调用一次parseFloat() 并将其存储在一个变量中。那么你就不需要一直打电话给parseFloat() 你已经可以访问的东西了。

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