How does one create a custom event in javascript that watches an array?

Question

I see other questions for how to create custom events, but I'm not clear on how to track specific custom conditions.

In my example, I need to "listen" for the eventuality that an array has gone from having x elements to y elements.

I'm not sure if it's a good idea to prototype on top of Array, though that's kind of ideally what I need.

However, the broader question is, what's the methodology for writing custom listeners that are effectively the analog of -pseudo-

onClockStruckTwo or onDomChanged or onRapture

Meaning, that rather than waiting for some other predefined onEvent (onclick, onkeydown, etc) to happen, I want to make my own.

And please no Framework answers. I'm trying to understand how this actually works in native javascript.

TIA

The clean (from the application design perspective) solution would be to create your own storage on top of array — zerkms, Aug 28 '12 at 02:57
http://stackoverflow.com/questions/2449182/getter-setter-on-javascript-array — Joseph Silber, Aug 28 '12 at 03:02
@FabrícioMatté... Thanks! I actually made my own day creating that tag! Kind of surprised it didn't already exist (no offense jQuery lovers). — Yevgeny Simkin, Aug 28 '12 at 03:03
@Dr.Dredel: I mean that the clean solution is to replace an array with own class and observe its modifications — zerkms, Aug 28 '12 at 03:03
@zerkms, but the whole point is to have a generic onCondition that I can re-use from one project to another. Or are you saying a thin Array wrapping object that only does this one extra thing? And just use that in place of Array going forward? — Yevgeny Simkin, Aug 28 '12 at 03:05
@Dr.Dredel: yep. It is a normal practice when you use delegation in case when you need to add some more features to some core class/type. — zerkms, Aug 28 '12 at 03:07
How has no one created that tag before! New favourite thing. — Hamish, Aug 28 '12 at 03:09
[`no-` tags are not acceptable on SO](http://meta.stackexchange.com/q/139721/135887). — Charles, Aug 28 '12 at 03:16

cereallarceny · Accepted Answer · 2012-08-28T03:16:24.100

0

The question I ask you is "what are you listening from?" If you're listening to a change on the server you could setTimeout an AJAX call, but that'd be far from suggested. If you're strictly looking to have the length of an element change, then there must be something else that you can know will set off the event. I say if it's not server related, don't "listen" at all, just attach the desired Javascript code to the end of something that you know will trigger the event change.

EDIT

Here's a list of all the Javascript event types. I don't see any mentions of an DOM object being empty. You may SOL with the way your hoping to do it.

edited Aug 28 '12 at 03:16

answered Aug 28 '12 at 03:01

cereallarceny

4,913
4
39
74

well, specifically, I'm listening for the eventuality that an Array that I'm using to find out that a series of async tasks have all completed, has become empty (which would signify that that job is done). There's an array object that holds a bunch of functions with callbacks. I *could write a bunch of onerous custom code to see when each array member's callback has fired and delete it, but I'd prefer to simply set a listener for when the array has gone from having members to being empty and attach something to that. – Yevgeny Simkin Aug 28 '12 at 03:11
I see... so there's no way to actually have the system "listen" for some custom eventuality. If I want to write my own onClockStrikesTwo event, I have to write something that sits around with an Interval and looks at the clock and sends notification when the specific condition was reached, or in the event of an array, I need to make sure that all the relevant array pushes, and pops go through me, so as to notice that it's time to dispatch the event? – Yevgeny Simkin Aug 28 '12 at 03:23
The only thing I'd suggest otherwise is to just run a function on a `setTimeout` Javascript function. There's no event type (to my knowledge) that permits you to check the emptiness of a DOM object. I will admit though, it seems like a great idea: maybe you should suggest it to Mozilla: https://bugzilla.mozilla.org/ – cereallarceny Aug 28 '12 at 03:26

score 0 · Answer 2 · answered Aug 28 '12 at 03:11

Arrays do not have any sort of event notification system for changes in javascript. So, if you wanted to know when an array was changed, you would have to create your own notification system.

Since you don't want to use any frameworks (many of which offer event notification and triggering things), you would have to build your own.

There are several different approaches for event systems (messages through a generic message callback, individual callbacks for each event, object oriented approaches of either of these, etc...

The most straightforward (thought not necessarily the most elegant) is to have the object that creates the event maintain a list of callbacks for the event. Then, when an interested party wants to register for the event, they call a method and pass it the event and a callback. This is similar to how addEventListener works in the browser DOM for DOM events. The recipient of that method call, then stores the callback in an array of callbacks. Some time later when the actual event occurs, each callback that is registered for that event is called in turn.

Since array modifications don't trigger events by themselves, you would have to implement a function that both makes the array change and signals the event.

How does one create a custom event in javascript that watches an array?

2 Answers2