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

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

您在这里遇到的问题是计算是一个同步过程，并防止 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首先执行并且速度更快，因此它避免了这个问题。