Как предотвратить многократное дублирование событий в динамической форме?

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 раза. Теперь он запускается только дважды. Прогресс!

Похоже, что проблема связана с турбовинками и как я настраиваю свой 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 обратно в ложь.

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

Если вы хотите, вы также могли бы принять, что шаг дальше и иметь другое логическое значение (например, needsToSave), который получил бы с истинным, если вы пытались спасти во время сохранения, а затем сразу же начать экономить последние вещи, как вскоре после первой экономии.