Javascript 警报延迟 jquery .remove 操作答案

【问题标题】：Javascript Alert delays jquery .remove actionJavascript 警报延迟 jquery .remove 操作
【发布时间】：2021-11-04 18:14:33
【问题描述】：

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

<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>

【问题讨论】：

浏览器不会更新显示，直到 JavaScript 函数返回，alert() 同步并阻塞。

标签： javascript jquery dynamic

【解决方案1】：

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

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

【讨论】：

这似乎是正确的。在具有不同浏览器的几个不同服务器上，“延迟”为 0 足以中断保持。

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

在注册超时之前，警报将在您的示例中触发。