javascript-如何停止函数内的Ajax调用

仅当用户按下“提交”按钮或按下Enter键时,才调用newMessage()函数.问题在于,即使未调用newMessage(),AJAX脚本也会继续在内部调用.例如,如果我在输入字段上键入任何内容而没有点击提交,则该值将由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;
  }
});

解决方法:

jQuery Ajax方法返回一个XHR对象.该对象包含中止方法.您可以按以下方式使用该链接

var xhr=jQuery.ajax({
        });

现在您可以使用中止方法.这将终止请求

xhr.abort();