Javascript 表单验证需要很长时间才能运行答案

【问题标题】：Javascript form validation taking a long time to runJavascript 表单验证需要很长时间才能运行
【发布时间】：2016-06-28 12:50:37
【问题描述】：

问题：如何在继续使用 jqBootstrapValidation 作为验证器的同时加快验证速度？

问题：我有一个小的联系表单设置，使用 jqBootstrapValidation 作为验证器非常好，但是当我开始添加其他字段时，它变得非常慢，以至于如果我在表单字段中键入多个字符，验证器需要一秒钟以上的时间来响应。

使用 20-30 个表单字段可以很容易地观察到减速。

我试过了：到目前为止，我已经尝试了很多方法，例如使用 style="display: none;" 隐藏元素，但这似乎对速度没有影响。

我可以在提交之前对表单进行部分处理，但我没有太多运气。有没有更好的方法来解决这种情况，也许我缺少一些简单的东西，因为我对 JavaScript 比较陌生？

我当前的表单/js：在我们添加更多表单字段之前效果很好。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Title</title>
</head>
<body id="page-top" class="index">
    <form name="sentMessage" id="contactForm" novalidate>
        <div class="control-group">
            <label>Name</label>
            <input type="text" placeholder="Name" id="name" required data-validation-required-message="Please a name.">
            <p class="help-block text-danger"></p>
        </div>
        <div class="control-group">
            <label>Message</label>
            <textarea rows="3" placeholder="Message" id="message" required data-validation-required-message="Enter a message."></textarea>
            <p class="help-block text-danger"></p>
        </div>
        <br>
        <div id="success"></div>
        <div>
                <button type="submit">Click to send</button>
        </div>
    </form>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    <!-- Contact Form Script -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script>
    $(function() {
        $("#contactForm input,#contactForm textarea").jqBootstrapValidation();
    });
    </script>
</body>
</html>

使用的验证器： http://ReactiveRaven.github.com/jqBootstrapValidation/

【问题讨论】：

注意：我确实使用引导程序来管理我的布局，这就是使用 jqBootstrapValidation 的原因。出于这个问题的目的，我已经删除了所有与引导相关的代码，以便更容易接近。

标签： javascript jquery jqbootstrapvalidation

【解决方案1】：

我仍在寻找更好的答案，但同时我找到了解决方法。

解决方法是仅在提交时和发生某些事件时验证表单，从而消除活动验证器的所有减速：

jqBootstrapValidation 验证器已注册为在以下任何事件发生时运行验证keyup, focus, blur, click, keydown, keypress, change，这意味着每当我在一个框中输入大量事件时同时发生并导致速度大大降低。简单的解决方法是删除我们不想触发的事件并仅保留关键事件。

例如，在 jqBootstrapValidation.js 文件中，从第 431 行开始，我们可以看到不同的事件：

  // =============================================================
  //                                             WATCH FOR CHANGES
  // =============================================================
  $this.bind(
    "submit.validation",
    function () {
      return $this.triggerHandler("change.validation", {submitting: true});
    }
  );
  $this.bind(
    [
      "keyup",
      "focus",
      "blur",
      "click",
      "keydown",
      "keypress",
      "change"
    ].join(".validation ") + ".validation",
    function (e, params) {

所以就我而言，我将其更改为仅注册“更改”和“模糊”事件，如下所示：

  // =============================================================
  //                                             WATCH FOR CHANGES
  // =============================================================
  $this.bind(
    "submit.validation",
    function () {
      return $this.triggerHandler("change.validation", {submitting: true});
    }
  );
  $this.bind(
    [
      "blur", //validate when a field looses focus
      "change" //Validate on form submit
    ].join(".validation ") + ".validation",
    function (e, params) {

可能需要进一步测试以确保按预期工作。

我认为值得一提的是，这个答案https://stackoverflow.com/a/1587543/1270000 还提供了额外的小优化帮助。

【讨论】：

我经常使用的简单技巧是创建一个调用实际方法的计时器 (window.setTimeout)，并在每个可能快速发生的操作中重置该计时器，例如键位。这样，繁重的代码只会被触发一次，例如最后一次击键后半秒。用户不会注意到任何差异，并且由于它只发布一次，它应该会好得多。希望这是有道理的。
现在这是一个非常聪明的想法，这样我就不会失去任何功能！非常感谢您的意见。
不是 100% 确定它会在这种特定情况下真正起作用，但肯定值得一试。让我知道事情的后续。 :-)
@ShadowWizard 现在我已经使用了我的工作，将超时添加到现有验证器代码似乎需要做很多额外的工作。但是，如果您想发布一个显示简短独立示例的答案，那么我可以将其标记为已接受。
干杯，我看看有没有时间。