JS function “确认”行为失常

Question

下面的 function 模仿了我希望在我的系统中的行为模式：

1. 按下按钮

2. 将文本更改为图标

3. 请求用户确认

4. 触发对端点的 Ajax 调用，并处理结果

5. 将文本返回到之前的 state。

正如所写，第 3 步发生在第 2 步和第 4 步之前； 使第 2 步的边界变得毫无意义。 我系统中的 Ajax 调用加载速度非常快，但 jQuery function 几乎没有闪烁文本。 我在这里做了一个可测试的片段。

我如何确保第2步的顺序正确？

 function callAjax() { $('#loadingIcon').css('display', 'inline-block'); $('#buttonText').css('display', 'none'); if (confirm('Are you sure would you like to proceed?')) { $.ajax({ url: "...", timeout: 60000, context: document.body, success: function (data) { location.reload(); }, error: function (data) { $('#loadingIcon').css('display', 'none'); $('#buttonText').css('display', 'initial'); } }); } else { $('#loadingIcon').css('display', 'none'); $('#buttonText').css('display', 'initial'); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onClick=callAjax()> <span id="buttonText">Loading Text</span> <span id="loadingIcon" style="display:none;">Icon</span> </button>

Answer 1

直到线程完成它正在做的事情并且confirm （以及prompt和alert ）是一个阻塞操作，UI 才会更新。

理想情况下，您根本不会使用confirm 。 相反，在页面中创建一个 UI 以提示用户输入数据。 它可以是页面上的表单元素、“模态对话框”等。

但是如果你想使用confirm ，你需要先让线程完成。 这有点 hack，但将它包装在一个近乎立即的setTimeout中应该可以解决问题：

$('#loadingIcon').css('display', 'inline-block');
$('#buttonText').css('display', 'none');
setTimeout(function () {
  if (confirm('Are you sure would you like to proceed?')) {
    $.ajax({
      /* etc. */
    });
  } else {
    $('#loadingIcon').css('display', 'none');
    $('#buttonText').css('display', 'initial');
  }
}, 1); // only delaying 1ms

这引入了 1毫秒的延迟，这肯定是难以察觉的。 但是由于完全使用setTimeout ，线程首先完成它正在处理的所有内容（包括 UI 更新），然后执行超时中安排的内容。