Question

我会在JS小提琴中这样做，但我不能让POST echoer工作，所以我在这里举个例子。让我们假装someApi返回“bar”

JS / jQuery

$(function() {
    $('button').click(function(event) {
        getSomeData();
    });
    function getSomeData() {
        $("div").text("Foo = ");
        $.get("someApi", function(i) {
            $("div").append(i);
        });
    };
});

HTML

<div></div>
<button>Click Me</button>

这里可能有一些拼写错误，但请不要理会它们，因为我已经在飞行中编写了一个示例。如果点击<button>一次，一切正常，会发生什么。调用AJAX函数，并在响应到来时附加<div>。如果我等待响应并再次单击，<div>将被Foo =覆盖，然后附加。当用户成为住院患者并多次点击<button>，产生多个AJAX请求时，就会出现此问题。这最终会多次附加“bar”。 JS / jQuery中是否有一个功能可以避免向同一个URL发送多个请求？我并不是说我想要一个async = false场景;我知道这会起作用，但也会减慢应用程序的速度。我也知道我可以添加一个if循环来检查是否已经附加了bar。我要求的是一个正确的JS / jQuery .blockMultipleRequest();类的东西。

Answer 1

我认为没有插件。您可以这样使用.one()：

function bindButton() {
    $('button').one('click', function(event) {
        getSomeData();
    });
}

function getSomeData()
    $("div").text("Foo = ");
    $.get("someApi", function(i) {
        $("div").append(i);
        bindButton();
    });
}

$(function() {
    bindButton();
});

在函数bindButton()中，您使用one()定义事件处理程序。一旦单击了按钮，就会删除事件，直到响应AJAX调用，然后再次调用函数bindButton()并再次绑定事件处理程序。

Answer 2

您可以使用jQuery提供的全局AJAX事件处理程序，然后根据请求执行操作。

.ajaxSend()任何请求启动时（event，jqXHR和settings属性都会发送到处理程序，因此您可以通过评估来执行特定于URL的操作settings.url
.ajaxComplete()。

然后，您可以使用一个跟踪每个URL的AJAX调用的对象，该对象可以在发送另一个请求之前进行咨询（例如，仅当它未处于活动/挂起状态时）。

jQuery在响应之前阻止多个提交

2 个答案: