callback reference and inheritance javascript

Question

I have two pieces of data in a multi-level array (object?) that I'm referencing in a callback function set with 2 for loops. However, I can't figure out how to get the current loop value into the callback: it uses the last value for all callbacks.

for (k in myobj.myarr) {
    for (m in myobj.myarr[k]){
        document.addEventListener(
            k,
            function(event){
                myobj.myfn(event, myobj['myarr'][k][m][0], myobj['myarr'][k][m][1]);
            },
            true
        );
    }
}

Where myobj['myarr'][k][m][0] are strings and myobj['myarr'][k][m][1] are functions. I have a console.log in the functions, and the same function is always called (the last one).

Yes, this is probably an odd implementation, and no, I can't use libraries. How do I get the correct values out of my array to pass into the callback functions?

rjz · Accepted Answer · 2012-10-26 15:04:42Z

3

What you really want is m bound to a context known only to one listener. For clarity's sake, you could define a function like this:

function doEvent(k, myobj, m) {
  document.addEventListener(
    k,
    function(event){
      myobj.myfn(event, myobj['myarr'][k][m][0], myobj['myarr'][k][m][1]);
    },
    true
  );
}

...and call it for each object in your array:

for (k in myobj.myarr) {
  for (m in myobj.myarr[k]){
      doEvent(k, myobj, m);  
  }
}

Now, the events will be specific to their respective ms in the loop.

answered Oct 26, 2012 at 15:04

rjz

16.5k3 gold badges39 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Randy Hall Over a year ago

I should have thought of this 20 minutes ago. DOH! Thanks!

rjz Over a year ago

That sounds like Javascript! :^)

Niet the Dark Absol · Accepted Answer · 2012-10-26 15:03:02Z

1

You can "lock" the value of the iterator like so:

for( k in myobj.myarr) {
    for( m in myobj.myarr[k]) {
        (function(m,k) {
            // code that depends on m and k here
        })(m,k);
    }
}

I have to ask, though, you seem to be creating a very large number of event listeners, which is bad for performance. Is there no way you could delegate the event handlers to a parent element and use event.target to find the actual element?

answered Oct 26, 2012 at 15:03

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

2 Comments

Randy Hall Over a year ago

I'm attaching all events to the document, and checking the target against the string (myobj['myarr'][k][m][0] and executing the matching callback function. Originally, I was attempting to have one event listener per event type, then look through an array for a matching selector. It worked, but the thought here was that several event listeners on the document would be faster than one that checks an array every time. Also, the scope is highly limited on the event listeners. I'm just exploring alternate "live" functions for a project that can't use 3rd party libraries.

Randy Hall Over a year ago

I wish I could vote your answer up more than once, it's VERY useful knowledge! However, I'm going to go with rjz answer for this instance. Thanks!

Collectives™ on Stack Overflow

callback reference and inheritance javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related