Javascript 警报延迟 jquery .remove 操作

Question

我正在创建动态跨度标记以在表单字段下方显示错误消息。在每次扫描错误之前，我想清除旧的错误跨度，但不知何故，清除函数中任何地方存在的“警报”语句会延迟删除操作。任何人都可以解释或帮助我覆盖这种行为吗？下面是一个非常简单的演示：

<html>

<style>
  .errorContainer {
    color: red;
    display: block;
    font-weight: bold;
  }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  function DisplayErrors() {
    var es = document.createElement("SPAN");
    es.className = "errorContainer";
    es.textContent = "First Name is required.";
    document.getElementById("firstName").after(es);

    var es = document.createElement("SPAN");
    es.className = "errorContainer";
    es.textContent = "Last Name is required.";
    document.getElementById("lastName").after(es);

  }


  function RemoveErrors() {
    $(".errorContainer").remove();
    alert("hold");
  }
</script>


<body>
  <table>
    <tr>
      <td>First Name: </td>
      <td><input id="firstName" name="firstName" type="text" maxlength="20"></td>
    </tr>
    <tr>
      <td>Last Name: </td>
      <td><input id="lastName" name="lastName" type="text" maxlength="20"></td>
    </tr>
  </table>

  <input type="button" onclick="DisplayErrors();" value="Display Errors">
  <input type="button" onclick="RemoveErrors();" value="Remove Errors">
</body>

</html>

Answer 1

DOM 可能会异步更新（即删除调用）。 alert 阻止事件循环，因此删除可能不会立即发生。您可以将 alert 包装在 setTimeout 中，以便在事件循环的未来回合中触发。

setTimeout(() => alert('hold'), 0);

Answer 2

您可以使用 setTimeout 强制警报仅在删除错误消息后执行：

<html>

<style>
  .errorContainer {
    color: red;
    display: block;
    font-weight: bold;
  }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  function DisplayErrors() {
    var es = document.createElement("SPAN");
    es.className = "errorContainer";
    es.textContent = "First Name is required.";
    document.getElementById("firstName").after(es);

    var es = document.createElement("SPAN");
    es.className = "errorContainer";
    es.textContent = "Last Name is required.";
    document.getElementById("lastName").after(es);

  }


  function RemoveErrors() {
    $(".errorContainer").remove();
    setTimeout(() => alert("hold"), 0)
  }
</script>


<body>
  <table>
    <tr>
      <td>First Name: </td>
      <td><input id="firstName" name="firstName" type="text" maxlength="20"></td>
    </tr>
    <tr>
      <td>Last Name: </td>
      <td><input id="lastName" name="lastName" type="text" maxlength="20"></td>
    </tr>
  </table>

  <input type="button" onclick="DisplayErrors();" value="Display Errors">
  <input type="button" onclick="RemoveErrors();" value="Remove Errors">
</body>

</html>

Answer 3

function RemoveErrors() {
    $(".errorContainer").remove();
    setTimeout(alert("hold"), 100);
}

我认为延迟至少要有 100 毫秒，因为警报需要在移除可见元素后出现。 UI 效果在 web 中很重要 :) 这是因为 jquery 删除函数会因异步行为而产生一些延迟。

Javascript 警报延迟 jquery .remove 操作

Javascript Alert delays jquery .remove action

javascript

jquery

dynamic