Jquery禁用链接5秒

Question

我有这个代码:

   $('#page-refresh').click( function() {
        $.ajax({
            url: "/page1.php",
            cache: false,
            dataType: "html",
            success: function(data) {
                $('#pagelist').html(data);
            }
        });
         return false;
   });

在此代码中，是否有可能在 ajax 成功函数上禁用 #page-refresh 单击 5 秒，然后重新启用它？基本上，如果一个人单击按钮并且发生此操作，我不希望他们在另外 5 秒内再次单击并运行此操作。我查看了delay()来取消绑定(bind)点击，然后再次绑定(bind)它，但是一旦取消绑定(bind)，它就再也不允许我点击按钮了。

Answer 1

如果“#page-refresh”确实是一个按钮(button 或 input type="button" 元素)，您可以使用它的 disabled属性，然后设置超时来恢复它:

$('#page-refresh').click( function() {
    var refreshButton = this;
    $.ajax({
        url: "/page1.php",
        cache: false,
        dataType: "html",
        success: function(data) {
            $('#pagelist').html(data);
            refreshButton.disabled = true;
            setTimeout(function() {
                refreshButton.disabled = false;
            }, 5000);
        }
    });
    return false;
});

如果它不是真正按钮，您可以模拟disabled属性。我将在此处使用一个类来完成此操作，以便您可以通过 CSS 显示用户的禁用状态:

$('#page-refresh').click( function() {
    var $refreshButton = $(this);
    if (!$refreshButton.hasClass('disabled')) {
        $.ajax({
            url: "/page1.php",
            cache: false,
            dataType: "html",
            success: function(data) {
                $('#pagelist').html(data);
                $refreshButton.addClass('disabled');
                setTimeout(function() {
                    $refreshButton.removeClass('disabled');
                }, 5000);
            }
        });
        return false;
    });

请注意，在第一种情况下，我保留对 DOM 元素的引用 (varfreshButton = this;)，但在第二种情况下，我保留对 jQuery 包装器的引用围绕它(var $refreshButton = $(this);)。那只是因为 jQuery 使测试/添加/删除类名变得容易。在这两种情况下，一旦事件处理程序中的闭包被释放(在上面，即 ajax 调用完成后五秒)，该引用就会被释放。

<小时/>

您明确表示您希望在 ajax 调用完成后禁用它，但正如下面 Marcus 指出的那样，您可能希望在开始 ajax 调用时禁用它。只需将禁用位向上移动一点，并为未调用 success 的情况添加一个 error 处理程序(error 处理程序通常是无论如何都是个好主意):

真实按钮:

$('#page-refresh').click( function() {
    var refreshButton = this;
    refreshButton.disabled = true;             // <== Moved
    $.ajax({
        url: "/page1.php",
        cache: false,
        dataType: "html",
        success: function(data) {
            $('#pagelist').html(data);
            setTimeout(function() {
                refreshButton.disabled = false;
            }, 5000);
        },
        error: function() {                    // <== Added
            refreshButton.disabled = false;
        }
    });
    return false;
});

通过“disabled”类模拟:

$('#page-refresh').click( function() {
    var $refreshButton = $(this);
    if (!$refreshButton.hasClass('disabled')) {
        $refreshButton.addClass('disabled');   // <== Moved
        $.ajax({
            url: "/page1.php",
            cache: false,
            dataType: "html",
            success: function(data) {
                $('#pagelist').html(data);
                setTimeout(function() {
                    $refreshButton.removeClass('disabled');
                }, 5000);
            },
            error: function() {                // <== Added
                $refreshButton.removeClass('disabled');
            }
        });
        return false;
    });