如何在动画执行时一次只允许点击一次JavaScript'点击'方法？

问题描述：

单击元素时，div会从屏幕滑入中心。当点击另一个元件时，在中心以外div滑落在屏幕和另div滑动。如何在动画执行时一次只允许点击一次JavaScript'点击'方法？

当点击另一个元件的初始div具有滑动到屏幕的中心的时间之前发生的问题。

$('#about').click(function(){ 
    /* makes any visible div slide out and slides in the 'about' div */ }); 

$('#contact').click(function(){ 
    /* makes any visible div slide out and slides in the 'contact' div */ });

换句话说，当你点击about，并马上点击contact然后他们都滑入不一致。

我已经尝试过“attrRemove”，“unbind”，“off”......虽然他们致力于禁用点击，但我无法再次启用它们。

ü可以包括功能代码为每次点击 –

我不是完全清楚你想对你的点击。仅在动画完成时才工作？ –

使用超时或延迟功能 –

答

您可以采取的一种方法是通过使用指示动作当前是否有效的变量。如果要排队的事件（这样你就不会完全无视点击（如下面的例子是做），那么代码可以被修改，以将其添加到某种类型的队列。

var slideInProgress = false; 

$('#about').click(function(){ 
    if (!slideInProgress) { 
     slideInProgress = true; 
     $("#slider").slideToggle(5000, function(){ 
     slideInProgress = false; 
    }); 
    } 
});

一很简单，迅速地放在一起捣鼓这个例子是在这里：https://jsfiddle.net/t8tcr0rp/

哇！这实际上工作！我改变的唯一的事情是将'slideInProgress = false;'放在一个单独的'setTimeout'中，并延迟它直到幻灯片执行！谢谢** P沃克**！ – Eddy

答

此代码可以帮助

function aboutFunc() { 
    $('#about').off('click'); 
    $('#contact').off('click'); 

    //do your stuff 

    $('#about').on('click', aboutFunc); 
    $('#contact').on('click', contactFunc); 
} 

function contactFunc() { 
    $('#about').off('click'); 
    $('#contact').off('click'); 

    //do your stuff 

    $('#about').on('click', aboutFunc); 
    $('#contact').on('click', contactFunc); 
} 


$('#about').on('click', aboutFunc); 
$('#contact').on('click', contactFunc);

如何在动画执行时一次只允许点击一次JavaScript'点击'方法？

相关推荐