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()解除对此的点击,然后再次绑定它,但一旦解除绑定,它就再也不允许我点击按钮了.

Answer 1

如果"#page-refresh"实际上是一个按钮(a 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元素(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;
    });