Question

我有这个图像，我已经给出了一个onclick函数，该函数又调用了一个在屏幕上执行动画的函数。现在，如果单击图像的次数太快，即使用户停止点击，动画也会持续很多次。我不希望发生这种情况。我希望用户只有在动画结束后才能点击下一次（阅读JQuery动画）以进行上一次点击。

Answer 1

您可以创建一个布尔值，在动画开始时将其设置为false，在动画结束时将其设置为true，默认情况下为true。允许用户在布尔值设置为true时单击。

Answer 2

您可以直接致电

.stop( true, true )

在调用任何jQuery fx 函数之前，或者您可以检查目标元素当前是否已设置动画，例如

if(!$( '#myimage' ).is( ':animated' ) ) {
}

前一种解决方案只是“重置”动画（参数指示，清除队列并跳转到结束）。使用后一种解决方案，您可能不允许任何进一步的点击（处理程序）被解雇。

参考：.stop()，:animated selector

Answer 3

可能有更多面向对象的首选方式（参见闭包），但你可以这样做：

var isInFunction = false;

function myHandler() {
    if (isInFunction) {
        return;
    }
    isInFunction = true;

    // do function logic

    isInFunction = false;
}

或者，如果您使用的是jQuery动画功能，则需要在动画完成后将isInFunction设置为false，因此您应该设置一个回调，以便在该时间之后将该var设置为false。动画需要。

请记住，这意味着此变量与所有图像的变量相同，因此如果您希望能够同时为多个图像设置动画，则必须以某种方式将变量分离为每个图像。< / p>

jAndy的方法比这更好，因为:animated已经做了我建议你应该做的事情，并且基于每个图像/元素，但你没有任何额外的开销/回调！

Answer 4

您可以做的是将任何图像标记设置为1 onclick，并在动画完成后将标记设置回0。

只有在标记值为0

时才能启动检查动画

不要让用户点击图像太多次

4 个答案: