Как остановить вызов Ajax внутри функции

Question

Функция newMessage() вызывается только тогда, когда пользователь нажимает кнопку отправки или нажимает ввод. Проблема в том, что сценарий AJAX продолжает вызывать внутри, даже когда newMessage() не вызывается. Например, если я введу что-либо в поле input, даже не нажав на кнопку submit, значение будет передано AJAX.

Я не могу понять, как это остановить, любая помощь будет оценена. Спасибо.

<div class="message-input">
  <div class="wrap">
    <input type="text" name="msg" id="msg" placeholder="Write your message..." />
    <i class="fa fa-paperclip attachment" aria-hidden="true"></i>
    <input type="hidden" value="0" name="convo_id" id="convo_id" readonly/>
    <button class="submit">
      <i class="fa fa-paper-plane" aria-hidden="true"></i>
    </button>
  </div>
</div>

function newMessage() {
  message = $(".message-input input").val();
  if ($.trim(message) == '') {
    return false;
  }
  var convo_id = document.getElementById("convo_id").value;
  var msg = $('#msg').val();
  $.ajax({
    cache: false,
    type: "POST",
    url: 'send_chat.php',
    data: ({
      convo_id: convo_id,
      msg: msg
    }),
    success: function(data) {
    }
  });
};

$('.submit').click(function() {
  newMessage();
});

$(window).on('keydown', function(e) {
  if (e.which == 13) {
    newMessage();
    return false;
  }
});

Answer 1

jQuery Ajax-метод возвращает объект XHR. Этот объект содержит метод прерывания. Вы можете использовать эту ссылку следующим образом

var xhr=jQuery.ajax({
        });

Теперь вы можете использовать метод прерывания. который убьет запрос

xhr.abort();