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;
}

fiddle :http://jsfiddle.net/uHR7a/2/

Answer 1

您可以在声明变量 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;
            });
        }  
    });
})();
​