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

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

rmarkdown::render

然后，您需要注意何时完成保存，然后将var saving = false; $form.on('blur', function () { if (saving) { return; // don't do the blur action } saving = true; // do saving stuff });设置为false。

saving

如果您愿意，您还可以更进一步，并使用另一个布尔值（如function autoSaveForm(actionPath) { // other stuff request.onreadystatechange = function () { if(request.readyState === XMLHttpRequest.DONE && request.status === 200) { saving = false; } }; }），如果您在保存时尝试保存，则会标记为true，然后立即开始保存最新的内容第一次保存就完成了。

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

1 个答案: