为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕盖茨4494581 2022-01-20 18:48:52
我们希望在执行 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');  }});
查看完整描述

1 回答

?
慕码人2483693

TA贡献1860条经验 获得超9个赞

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


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


查看完整回答
反对 回复 2022-01-20
  • 1 回答
  • 0 关注
  • 221 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号