如何防止在动态表单上触发多个重复事件？

Question

我有一个动态表单，允许您根据需要添加更多子记录。我用的是茧rubygem。我使用以下代码在表单上自动保存：

  <script>

  $(document).on('turbolinks:load', function() {

    var $form = $('form.autosave');
    var saving = false;

    function autoSaveForm(actionPath) {
      var data = $form.serialize();
      console.log("POST: " + actionPath);
      var request = new XMLHttpRequest();
      request.open('POST', actionPath, true);
      request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
      request.send(data);
      request.onreadystatechange = function () {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
          saving = false;
        }
      };
    }

    $form.on('blur', 'input', function() {
      if (saving) {
        return; // don't do the blur action
      }
      saving = true;
      var actionPath = $form.attr('action');
      autoSaveForm(actionPath);
    });

  });

  </script>

"blur" 事件被触发了两次。这是我的控制台输出：

POST: /user/profile VM1717:9 
POST: /user/profile VM1717:9

我根据@samanime 的建议更新了我的代码，添加了一个布尔值以防止事件被触发 4 次。现在它只触发了两次。进步了！

看来问题出在 turbolinks 以及我如何设置我的 JS。

Answer 1

添加一个布尔值来跟踪您当前是否正在保存，如果您正在保存则不再执行此操作。

var saving = false;
$form.on('blur', function () {
    if (saving) {
        return; // don't do the blur action
    }

    saving = true;
    // do saving stuff
});

然后您需要在保存完成后观看，然后将 saving 设置回 false。

function autoSaveForm(actionPath) {
    // other stuff
    request.onreadystatechange = function () {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            saving = false;
        }
    };
}

如果你愿意，你还可以更进一步，使用另一个布尔值（如 needsToSave），如果你在保存时尝试保存，它会被标记为 true，然后立即开始保存最新的第一次保存完成后立即更新。

如何防止在动态表单上触发多个重复事件？

How do I prevent multiple duplicate events from firing on a dynamic form?

javascript

jquery

ruby-on-rails

turbolinks

cocoon-gem