javascript - jQuery 防止在响应之前多次提交

Question

我会在 JS fiddle 中执行此操作，但我无法让 POST echoer 工作，所以我将在这里举一个例子。让我们假设someApi返回“栏”

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() 并再次绑定(bind)事件处理程序。