jQuery bind() unbind()和on()和off()

时间:2021-10-19 04:34:10

Im working on a small adminarea for a webpage.

我在一个小的管理区域做网页。

Does it make sense to unbind events for increasing performance(client)? Or does it cost more performance to unbind events and binding it 30Seconds later again?

为提高性能(客户端)取消绑定事件是否有意义?或者,取消绑定事件并在30秒后再次绑定它是否需要更高的性能?

My questions: Is the idea behind bind()-unbind() or on().off() just increasing clientbased performance or should i use it for other scenarios? This question comes because my javascript code is growing and growing (about 30%) because of unbinding events. And i think, that some things may not work, when user interacts not, as i want...

我的问题是:bind()-unbind()或on().off()的思想是否只是增加了基于客户机的性能,或者我是否应该将其用于其他场景?这个问题的出现是因为我的javascript代码因为没有绑定的事件而增长和增长(大约30%)。我认为,当用户不按我的意愿进行交互时,有些东西可能无法工作。

.

EDIT: The most times im binding/unbinding keypress events, because i need the arrow keys for diff. scenarios.

编辑:大多数情况下,im绑定/取消绑定键按事件,因为我需要箭头键进行扩散。

3 个解决方案

#1


5  

Unbinding only to bind again for performance reasons is probably bug-prone and makes things overly complicated in most cases.

由于性能原因,仅重新绑定绑定就可能容易出错,在大多数情况下会使事情变得过于复杂。

Instead of binding event listeners on many specific DOM elements, you could take a more "birds eye" approach and bind just a few listeners near the top of the DOM tree, and then when the event is triggered check what was actually clicked.

不需要将事件监听器绑定到许多特定的DOM元素上,您可以采用更“鸟瞰”的方法,在DOM树的顶部绑定几个监听器,然后在触发事件时检查实际单击的是什么。

That way you won't spend CPU on binding/unbinding lots of event listeners, but instead take a small CPU hit when an event is processed (which is usually not noticeable).

这样,您就不会在绑定/解绑定大量事件侦听器上花费CPU时间,而是在处理事件时(通常不明显)占用少量CPU时间。

This is covered in detail here: event delegation vs direct binding when adding complex elements to a page

这里详细介绍了这一点:在向页面添加复杂元素时,事件委托vs直接绑定

#2


4  

If you try to bind and unbind you are creating race conditions for the garbage collector to actually come in and clean up your code. It is best to bind once and not have to bind again. If your client side is expected to run for long periods of time (weeks, months) then you should look into memory management and memory leaks as more of a concern for performance.

如果您试图绑定和解除绑定,那么就会为垃圾收集器创建竞争条件,从而真正地进入并清理您的代码。最好一次绑定,不必再绑定。如果您的客户端预期要运行很长一段时间(几周、几个月),那么您应该将内存管理和内存泄漏视为对性能的更多关注。

Binding-unbinding (if not done correctly) may produce memory leaks which are hard to find. If you are using webkit, take heap snapshots of your performance with unbinding versus binding once and then you can make the best decision.

绑定-解绑定(如果做得不对)可能会产生很难找到的内存泄漏。如果您使用的是webkit,那么将您的性能的堆快照以无绑定和绑定的方式记录下来,然后您就可以做出最佳的决策。

Here's a link:

这里有一个链接:

http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

#3


1  

One solution to avoid having to worry about this, especially if you deal with constantly changing elements or large quantities, is to register your event with the body and then specify a selector argument.

避免这种情况的一种解决方案是,将事件注册到主体中,然后指定一个选择器参数,尤其是在处理不断变化的元素或大量元素时。

Like this:

是这样的:

$("body").on("click", ".my-actual-element", function(aEvent) {
   // Event handler code goes here.
});

See more here $.on().

在这里看到更多美元。在()。

#1


5  

Unbinding only to bind again for performance reasons is probably bug-prone and makes things overly complicated in most cases.

由于性能原因,仅重新绑定绑定就可能容易出错,在大多数情况下会使事情变得过于复杂。

Instead of binding event listeners on many specific DOM elements, you could take a more "birds eye" approach and bind just a few listeners near the top of the DOM tree, and then when the event is triggered check what was actually clicked.

不需要将事件监听器绑定到许多特定的DOM元素上,您可以采用更“鸟瞰”的方法,在DOM树的顶部绑定几个监听器,然后在触发事件时检查实际单击的是什么。

That way you won't spend CPU on binding/unbinding lots of event listeners, but instead take a small CPU hit when an event is processed (which is usually not noticeable).

这样,您就不会在绑定/解绑定大量事件侦听器上花费CPU时间,而是在处理事件时(通常不明显)占用少量CPU时间。

This is covered in detail here: event delegation vs direct binding when adding complex elements to a page

这里详细介绍了这一点:在向页面添加复杂元素时,事件委托vs直接绑定

#2


4  

If you try to bind and unbind you are creating race conditions for the garbage collector to actually come in and clean up your code. It is best to bind once and not have to bind again. If your client side is expected to run for long periods of time (weeks, months) then you should look into memory management and memory leaks as more of a concern for performance.

如果您试图绑定和解除绑定,那么就会为垃圾收集器创建竞争条件,从而真正地进入并清理您的代码。最好一次绑定,不必再绑定。如果您的客户端预期要运行很长一段时间(几周、几个月),那么您应该将内存管理和内存泄漏视为对性能的更多关注。

Binding-unbinding (if not done correctly) may produce memory leaks which are hard to find. If you are using webkit, take heap snapshots of your performance with unbinding versus binding once and then you can make the best decision.

绑定-解绑定(如果做得不对)可能会产生很难找到的内存泄漏。如果您使用的是webkit,那么将您的性能的堆快照以无绑定和绑定的方式记录下来,然后您就可以做出最佳的决策。

Here's a link:

这里有一个链接:

http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

#3


1  

One solution to avoid having to worry about this, especially if you deal with constantly changing elements or large quantities, is to register your event with the body and then specify a selector argument.

避免这种情况的一种解决方案是,将事件注册到主体中,然后指定一个选择器参数,尤其是在处理不断变化的元素或大量元素时。

Like this:

是这样的:

$("body").on("click", ".my-actual-element", function(aEvent) {
   // Event handler code goes here.
});

See more here $.on().

在这里看到更多美元。在()。