如何解除绑定或防止在函数运行时发生其他单击事件?

I have a carousel set up and I have click events tied to the navigation arrows. When they are clicked I use jQuery animate to animate in the elements of the next carousel slide, and due to the nature of the animations I use setTimeout() a few times.

我有一个旋转木马设置，我有与导航箭头相连的点击事件。单击它们时，我使用jQuery动画将下一个旋转木马幻灯片的元素动画化，由于动画的性质，我多次使用setTimeout()。

I have one bug, where if I click on an arrow, and then quickly click the previous or next arrow, the animation will get confused due to the timeouts (which are necessary in this project) and render nothing on the screen. I've looked at this for awhile, and I figure that the best method might be to prevent the other arrows from being clickable until the current animation has completed.

我有一个错误，如果我点击一个箭头，然后快速点击上一个或下一个箭头，动画会因为超时(这在这个项目中是必要的)而变得混乱，并且在屏幕上什么也不显示。我研究这个问题已经有一段时间了，我认为最好的方法可能是在当前动画完成之前防止其他箭头被点击。

Each arrow is controlled by click not on:('click', function() ... etc:

每一个箭头都是通过点击来控制的:(‘点击’，功能()……等:

$("#arrow1").click(function() {...}

I've looked at

我看过

$("element").off("click");

But as they are not attached using the 'on' method I don't think this will work.

但由于他们没有使用“on”方法连接，我不认为这行得通。

I want something like:

我希望类似:

$("#arrow1").click(function() {
 $("#arrow2, #arrow3, #arrow4").off("click");
 // do my animations, then
 $("#arrow2, #arrow3, #arrow4").on("click");
}

But I haven't been able to get this to work yet.

但我还没能让它生效。

4 个解决方案

#1

.off and .on do not work as you expect. The .click method and other event methods use the .on method behind the scenes for binding the handlers. When the .off method is called without any specific handlers it removes (and not temporary disables) all the bound handlers for a specific event. And calling .on without passing a handler has no effect.

离开和离开不要像你期望的那样工作。.click方法和其他事件方法使用后台的.on方法绑定处理程序。当.off方法在没有任何特定处理程序的情况下被调用时，它将删除(而不是临时禁用)特定事件的所有绑定处理程序。调用.on而不传递处理程序没有任何效果。

In your case you can use a flag instead of manipulating event handlers which is also more efficient than (re)binding and removing the event handlers.

在您的示例中，可以使用标志而不是操作事件处理程序，这也比(重新)绑定和删除事件处理程序更有效。

#2

You could use the unbind function

您可以使用unbind函数

$("#arrow1").click(function() {
 // $("#arrow2, #arrow3, #arrow4").off("click");
 $("#arrow2, #arrow3, #arrow4").unbind("click");
 // do my animations, then
 $("#arrow2, #arrow3, #arrow4").on("click");
}

http://api.jquery.com/unbind/

#3

Try to use unbind() function it should remove the event.

尝试使用unbind()函数，它应该删除事件。

Description: Remove a previously-attached event handler from the elements.

描述:从元素中删除一个预先附加的事件处理程序。

$("#arrow1").unbind( "click" );

The off() function should work also.

off()函数也应该工作。

Description: Remove an event handler.

说明:删除事件处理程序。

$("#arrow1").off( "click" );

Hope this helps.

希望这个有帮助。

#4

What I would do is set a boolean isLoading = false from the beginning. Then while the function is executing set:

我要做的是从一开始就设置布尔isLoading = false。当函数执行set时:

isLoading = true. If isLoading == true, $('button').attr('disabled', 'disabled'); else enable it

isLoading = true。If isLoading == = true， $('button')。attr(“禁用”,“禁用”);其他启用它

When it completes then change it back to false.

完成后，将其更改为false。

Sorry it's psudo code, it's just off the top of my head.

不好意思，这是psudo代码，我没办法理解。

#1