jQuery防止在响应前多次提交

Question

我会在JS小提琴中这样做，但我不能让POST回声器工作，所以我将在这里做一个例子。假设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属性被发送到处理程序，因此您可以通过评估settings.url
来执行特定于url的操作)
• .ajaxComplete()当任何请求完成时。

你可以使用一个对象来跟踪每个URL的AJAX调用，它可以在发送另一个请求之前进行咨询(例如，只有当它当前不是处于活动/挂起状态时)。