jquery addClass不会立即生效

<!DOCTYPE html> <html> <head> <style> .ais-card-message { padding: 6px; margin-top: 6px; margin-bottom: 6px; text-align: left; } .ais-card-message-info { background-color: lightskyblue; } .ais-card-message-warn { background-color: lightpink; } </style> </head> <body> <div id="title"> <p>Message "Loading, please wait ..." should appear below when button clicked.  Followed by either "Error" or "Loaded" after a short delay.</p> </div> <div id="data">Data will be loaded here</div> <div id="msgBox" class="ais-card-message">Messages should display here</div> <div><button id="btnLoad">Load</button></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ function showMsg(msg, type) { // msg is message to display. type is either "info" or "warn" $('#msgBox').removeClass("ais-card-message-info ais-card-message-warn"); $('#msgBox').addClass("ais-card-message-" + type); $('#msgBox').text(msg); $('#msgBox').show(); return } $('#btnLoad').click(function(){ // For some reason the following message doesn't display showMsg('Loading, please wait ...', 'info'); if (!loadData()) { // But this message does display if loadData returns false showMsg('Error', 'warn'); return }else{ // and this message also displays if loadData returns true showMsg('Loaded', 'info'); return } }); function loadData() { // Just a loop to simulate network delay var i; for (i=0; i < 100000; i++) { var j; for (j=0; j < 100000; j++) { var k = Math.sqrt(j); } } $('#data').text("Here is some dummy data"); return true } }); </script> </body> </html>

你的代码有几个问题。首先在“模拟”AJAX请求中使用循环这是一个同步操作,也是阻止更新ui的问题的原因;循环正在停止执行任何其他操作(即dom中元素的更新)。因此,它似乎只在循环完成后更新。

其次,一旦在 loadData() 函数将遇到同步性问题,因为您希望布尔值返回值指示ajax请求是否工作。这在异步逻辑中是不可能的因此,你需要与承诺和/或回调一起工作。

要做到这一点,你需要从 $.ajax() 在 加载数据() 功能然后你可以使用 done() 和 fail() 方法根据请求的结果更新DOM应该是这样的:

$('#btnLoad').click(function() {
  showMsg('Loading, please wait ...', 'info');
  loadData().done(function() {
   showMsg('Loaded', 'info');
  }).fail(function() {
    showMsg('Error', 'warn');
  });
});

function loadData() {
  return $.ajax({
    url: '/yourpage',
    data: {
      foo: 'bar'
    }
  });
}

下面是一个工作示例,通过在3秒后手动解析延迟对象来模拟ajax请求。由于正确使用了异步逻辑,您可以看到加载消息现在已正确显示。

$(document).ready(function() {
  function showMsg(msg, type) {
    $('#msgBox')
      .removeClass("ais-card-message-info ais-card-message-warn")
      .addClass("ais-card-message-" + type)
      .text(msg)
      .show();
  }
  
  $('#btnLoad').click(function() {
    showMsg('Loading, please wait ...', 'info');
    loadData().done(function() {
      showMsg('Loaded', 'info');
    }).fail(function() {
      showMsg('Error', 'warn');
    });
  });

  function loadData() {
    // mock AJAX request, just for this demo
    var deferred = jQuery.Deferred();
    setTimeout(function() {
      deferred.resolve();
    }, 3000);
    return deferred;
  }
});

.ais-card-message {
  padding: 6px;
  margin-top: 6px;
  margin-bottom: 6px;
  text-align: left;
}

.ais-card-message-info {
  background-color: lightskyblue;
}

.ais-card-message-warn {
  background-color: lightpink;
}

<div id="title">
  <p>Message "Loading, please wait ..." should appear below when button clicked.&nbsp; Followed by either "Error" or "Loaded" after a short delay.</p>
</div>
<div id="data">Data will be loaded here</div>
<div id="msgBox" class="ais-card-message">Messages should display here</div>
<div><button id="btnLoad">Load</button></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>