javascript - 无法在第一次单击时禁用链接并在动画完成时重新启用

Question

我正在尝试在单击链接时执行一个简单的动画。我希望链接在第一次点击后被禁用，并且只有在动画完成后才重新启用，该动画是第一次调用的结果。

HTML：

<a id="link" href="#">Click</a>    
<div id="test" style="float:left;border:1px solid #000;width:100px;height:100px;">Test</div>
<div id="test2"></div>
​

jQuery：

$('#link').click(function(e){
  $('#link').bind('click', disableLink);
  ht = $('#test').height();
  $('#test').animate({height:'+=50'},5000,function(){$('#link').unbind('click', disableLink);});
  $('#test2').html(ht);
});

function disableLink(e) {
    e.preventDefault();
    return false;
}

小提琴：http: //jsfiddle.net/uHR7a/2/

​</p>

Answer 1

在您使用 jquery 时使用此代码：

   $('#link').click(function(e){
      $('#link').removeAttr('href');
      ht = $('#test').height();
      $('#test').animate({height:'+=50'},5000,function(){$('#link').attr('href', '#')});
      $('#test2').html(ht);
    });

    function disableLink(e) {
        e.preventDefault();
        return false;
    }

Answer 2

您可以在声明变量的地方使用匿名函数，in_process并取决于它是否启动新动画。

演示：http: //jsfiddle.net/dUarG/1/

(function () {
    var in_process = false;

    $('#link').click(function (e) {
        e.preventDefault();

        if (!in_process) {
            in_process = true;

            $('#test').animate({height: '+=50'}, 2000, function () {
                in_process = false;
            });
        }  
    });
})();
​

Answer 3

您可以为此使用on()和：off()

$('#link').on('click', anim); //bind click

function anim(e) {
    $(e.target).off('click'); //unbind click when animating
    ht = $('#test').height();
    $('#test').animate({
        height: '+=50'
    }, 5000, function() {
        $(e.target).on('click', anim); //rebind when done
    });
    $('#test2').html(ht);
}​

小提琴