在一定时间后更改加载微调器的内容而不刷新页面

Question

我有一个正在加载AJAX调用的微调器。因此，我想在10秒后更改显示文本，以告诉用户“请稍候，仍在处理中……”。用户从下拉列表中更改公司名称。

function showAjaxLoader() {
  if ($('#loader').length <= 0) {
    $('body').append('<div style="display:none;"><div id="loader" class="stepLoader"><p>Loading...</p></div></div>');
    setTimeout(function() {
      $('#loader p').replaceWith('<span style="font-size:12px; font-weight:bold;">Please wait, still processing...<span>');
    }, 10000);
  } else {
    $('#loader .spinner').remove();
  }
}

此解决方案工作正常。但是，当用户更改公司名称时，加载程序仍显示“请稍候，仍在处理...”消息。它应该显示“正在加载...”消息。我正在调用此函数；

 beforeSend: showAjaxLoader(),

任何建议将不胜感激。

Answer 1

作为一个选项，您可能希望完全从DOM中删除加载程序。我希望您也可以使用hideAjaxLoader的方法$('#loader').remove()。

或者如果您同时使用showAjaxLoader进行两次操作，则最好将其重命名为toggleAjaxLoader并在else中进行完全清理，因此您可以使用{ {1}}

一个侧面的建议是，如果数据早于10秒到达，则清除超时将是一个好习惯。