第一次点击jQuery setTimeout然后第二次点击clearTimeout

Question

第一次用户点击一个按钮我希望在循环动画之前在div上设置3秒的超时时间。

如果用户在3秒钟内再次单击，我希望超时清除并停止动画。

到目前为止，我可以超时工作正常，但我无法清除它并让动画停止。

的HTML：

的CSS：

div.block { 
    position: absolute; 
    display: block; 
    height: 100px; 
    width: 100px; 
    top: -10px; 
    left: 50%; 
    background-color: red; } 

jQuery的：

$('a.button').toggle(function(){ 
    var blockTimer; 
    blockTimer = setTimeout(function block(){ 
     $("div.block").animate({top: '400px'}, 4000, 'linear', function() { $(this).css('top', '-10px'); block(); }); 
     },3000); 
}, function(){ 
clearTimeout(rainTimer); 
    $('div.block').clearQueue().stop().fadeOut(500, function() { $(this).css('top', '-10px').show(); }); 
}); 

Answer 1

您需要定义变量外的函数的范围所以您可以稍后清除它。此外，您正在清除rainTimer，但您将其定义为blockTimer。

var blockTimer; 

$('a.button').toggle(function(){ 
    blockTimer = setTimeout(function block() { 
     $("div.block").animate({top: '400px'}, 4000, 'linear', function() { $(this).css('top', '-10px'); block(); }); 
     }, 3000); 
}, function() { 
    clearTimeout(blockTimer); 
    $('div.block').clearQueue().stop().fadeOut(500, function() { $(this).css('top', '-10px').show(); }); 
});