我有以下代码:

   $('#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),它就再也不允许我单击该按钮了。

最佳答案

如果“#page-refresh”确实是一个按钮(一个buttoninput 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元素的引用(var refreshButton = this;),但是在第二种情况下,我保留了围绕它的jQuery包装器(var $refreshButton = $(this);)的引用。那只是因为jQuery使测试/添加/删除类名变得容易。在这两种情况下,一旦事件处理程序中的闭包被释放,该引用即被释放(在上面,即ajax调用完成后的五秒钟)。

您说过,您特别想在ajax调用完成后将其禁用,但是正如Marcus在下面指出的那样,您可能想在启动ajax调用时将其禁用。只需将禁用位稍稍向上移动一点,并为未调用error的情况添加success处理程序(无论如何,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;
});

通过“禁用”类进行模拟:
$('#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;
    });

关于jQuery禁用链接5秒钟,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4591088/

10-12 00:24
查看更多