单击时暂时“禁用”链接？答案

【问题标题】："Disable" a link temporarily when clicked?单击时暂时“禁用”链接？
【发布时间】：2011-07-19 20:08:10
【问题描述】：

我有一个链接，当单击它时，它会对某些 div 等执行一些动画功能，并且效果很好。我的问题是当我多次单击按钮等时，动画看起来很奇怪。我希望这样，当我的按钮被点击时，该按钮会被“禁用”2 秒。

我认为我不需要发布代码，但只需询问您是否认为需要它。

我的链接是这样的：

<a href="button">Click</a>

【问题讨论】：

您可以删除href 属性，将其放入data- 属性中，然后使用setTimeout 将其添加回来。
由于您没有发布代码，我并不肯定，但也许您可以在调用动画之前使用 stop() 进行探索，这样点击不会继续向链。如果适合您的情况，这似乎是最简单的解决方案。

标签： jquery hyperlink click

【解决方案1】：

是的，你绝对可以这样做。

您添加一个点击处理程序并在动画运行时使用preventDefault()，直到它完成。更多关于 preventDefault 的信息在 jQuery 文档中。您可以在第一次单击后使用标志或更改单击处理程序来完成此操作。这是一个带有标志的示例。

var isAnimating = false;
$("#animationLink").click(function(e) {
    if(!isAnimating) {
        isAnimating = true;
        setTimeout("isAnimating = false", 2000); // set to false in 2 seconds
        // alternatively you could wait until your animation is done
        // call animation code
    } else {
        e.preventDefault();
    }
});

点击处理程序中的return false; 将具有与 preventDefault 相同的效果，并添加了防止事件冒泡 DOM 的操作。

【讨论】：

【解决方案2】：

这是一种使用one 的自包含方式，它会在一次触发后自动取消绑定点击处理程序，以及重新绑定自身的点击函数：

$('#yourlink').one('click', function clicker(){ // name the function
    var that = this;
    event.preventDefault();
    do_your_stuff_here();
    var rebind = setTimeout(function() {
       $(that).one('click',clicker); // ...then rebind by name
    }, 2000);   
});

这是一个工作示例：http://jsfiddle.net/redler/8sGqK/

【讨论】：

【解决方案3】：

如果您不希望链接在单击时起作用，则需要返回 false。

$('a').click(function(){
   if (doSomeCheck()) {
     //run animation
   } else {
      return false; //don't want the link to work
   }
});

但是，我建议您查看效果 API 和 .stop() 方法来修复您的动画变得不稳定：http://api.jquery.com/category/effects/

【讨论】：

【解决方案4】：

不使用全局变量或超时，您可以利用动画的回调来重新分配函数。

function DoTheAnimation(){
    var $a = $(this);
    var h = $("div").height() + 100;
    $("div").animate({'height': h}, "slow",function(){
     $a.one("click.animate", DoTheAnimation);
   });
}

$("a").click(function(event){event.preventDefault();}).one("click.animate", DoTheAnimation);

jsfiddle 上的代码示例。

【讨论】：