Question

我刚刚开始学习JavaScript，我正在做的是向Django API发出请求。所以我发现我可以使用Ajax请求来这样做。

因此，我制作了一个搜索栏，等待keyup操作等待1秒钟后就会调用API。

input.addEventListener('keyup', function (e) {
  clearTimeout(timeout);
  timout = setTimeout(function () {
    runScript(input.value);
  }, 1000);
});

runscript函数是发出Ajax请求的函数

function runScript(input) {
  var jqXHR = $.ajax({
    url: "http://localhost:8090/api/movie/?name=" + input,
    datatype: 'json',
    success: callbackFunc
  });
  return jqXHR.responseText;
}

而callbackFunc是我想对响应做的事情

function callbackFunc(response) {
   // do something
}

问题是ajax向API发出了多个请求。如何阻止Ajax发出多个请求？

相关：Prevent ajax call from firing twice，Ajax, prevent multiple request on click

Answer 1

您可以使用 stopImmediatePropagation 方法，该方法适用于此类情况。 https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation。

如果针对同一事件类型将多个侦听器附加到同一元素，则将按照添加它们的顺序来调用它们。如果在一个这样的调用期间调用stopImmediatePropagation（），则不会调用其余的侦听器。

您只需要在超时功能上添加方法调用

timeout = setTimeout(function () {
e.stopImmediatePropagation()
  runScript(input.value);
}, 1000);

在这里https://jsfiddle.net/zgranda/fujw6tvp/9/

Ajax向API发出多个请求

1 个答案: