Почему JQuery $ .post отправляет дважды?

Question

Почему это вызывает моё Действие дважды?Для фона использование .change работает только тогда, когда пользователь щелкает где-то еще в форме.Также .change не будет срабатывать при закрытии браузера.Следовательно, таймер в сочетании с проверкой свойства грязных данных.Заранее спасибо.

var timeoutId;
$(function() {
  var formElements = $('#myformid').find('input, select, textarea').add('[form=myformid]').not(':disabled').each(function() {
    $(this).attr('data-dirty', false).on('input propertychange change', function() {
      var changedText = $(this).val();
      var commentID = $(this).attr('id');
      clearTimeout(timeoutId);
      timeoutId = setTimeout(function() {
        // Runs 1 second (1000 ms) after the last change
        // Saving to DB Here
        $.post('@Url.Action("UpdateComment", "CommentJournal")', {
          "ChangedText": changedText,
          "commentID": commentID
        });
        $(this).attr('data-dirty', true);
      }, 1000);
    });
  });
});

//Controller
[HttpPost]
[AllowAnonymous]
public ActionResult UpdateComment(string changedText, string commentID) {
  return null;
}

Answer 1

Возможно, потому что оба события input и change срабатывают, при срабатывании change более 1000 мсек после срабатывания input, поскольку change срабатывает только тогда, когда фокус покидает элемент управления.Пример:

var timerId = 0;
$("#field1").on("input change", function(event) {
  var type = event.type;
  clearTimeout(timerId);
  timerId = setTimeout(function() {
    console.log("timeout fired for '" + type + "'");
  }, 1000);
});

<p>Type something in the first field, wait at least a second, then tab out of the field:</p>
<div>
  <label>
    First field:
    <input type="text" id="field1">
  </label>
</div>
<div>
  <label>
    second field:
    <input type="text" id="field2">
  </label>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Если вы зацепите input, вам не нужно зацеплять change.