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

Question

我有一个动态表单，可让您根据需要添加更多子记录。我正在使用茧红宝石。我使用以下代码自动保存表单：

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

“模糊”事件被触发了两次。这是我的控制台输出：

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，然后立即开始保存最新的内容第一次保存已完成。