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

Question

newMessage() 函数仅在用户按下提交按钮或按下回车键时调用。问题是 AJAX 脚本一直在内部调用，即使未调用 newMessage() 也是如此。例如，如果我在 input 字段中键入任何内容，甚至没有点击提交，该值将由 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({
        });

现在你可以使用 abort 方法了。这将终止请求

xhr.abort();