javascript - 为什么我不能在函数开始时更改此按钮的文本？

Question

我有一个按钮。 onClick 按钮触发 JS 函数。在这个函数的第一行代码中，我使用 jQuery 更改了按钮的 HTML。然后该功能需要几秒钟。按钮 HTML 仅在完成完整功能后才更改(在浏览器中)。

https://jsfiddle.net/wqps1r0k/

代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button class="btn btn-primary" onclick="setToDisabled(this)">Toggle</button>

    <script type="text/javascript">
    function setToDisabled(btn) {
      //log
      console.log('start');

      //how to force the browser to show this text immediately?
      $(btn).html("TEXT CHANGED ON START OF FUNCTION");

      //create a 2 seconds delay
      var d1 = new Date();
      var t1 = d1.getTime();
      var keeprunning = true;
      while(keeprunning) {
        var d2 = new Date();	
        var t2 = d2.getTime();
        var dif = t2 - t1;
        if((dif / 1000) > 2) keeprunning = false;
      }
    
      //log
      console.log('done');
    }
    </script>

在此示例中，是否可以在流程开始时更改按钮文本并立即在我的浏览器中看到它？例如，将文本更改为“正在加载...”。

如果我检查按钮，您可以看到文本直接更改，但只有在函数完成后才可见。

附言。我用 Chrome

Answer 1

问题是因为 while() 循环是同步的，并且在更新 UI 的浏览器线程有机会执行之前开始执行。因此，在您的循环完成之前，UI 将被阻止更改，此时新的 HTML 将应用于按钮。

要解决此问题，请使用超时来延迟某些逻辑。它是异步的，不会干扰 UI:

$('.btn').click(function() {
  console.log('start');
  $(this).html("TEXT CHANGED ON START OF FUNCTION");

  setTimeout(function() {
    console.log('done');
  }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary">Toggle</button>

另请注意，我使用不显眼的事件处理程序删除了过时的 on* 事件属性，因为这被认为是更好的做法。