Hi again, Just realized I assumed knowledge on your part which you *probably* have, but I shouldn't assume. :-)
That refactored version works because the handler is a closure over (effectively) the `height` variable in the `setupToggler` function. Even when `setupToggler` returns, the handler still has access to that variable and its value (because it has a reference to the environment that was created for the call, which includes the variable). More here[1]. [1] http://blog.niftysnippets.org/2008/02/closures-are-not-complicated.html HTH, -- T.J. On May 14, 12:07 pm, "T.J. Crowder" <t...@crowdersoftware.com> wrote: > Hi, > > > ...because I > > know javascript is prone to memory leaks... > > Javascript is not prone to memory leaks. Some *browsers* are prone to > memory leaks, particularly where Javascript and the DOM interact (IE > especially), but that's nothing to do with Javascript itself. Not to > be picky or anything. ;-) > > > ...I'm wondering if there is a better way of doing this... > > Looks mostly fine to me. I think I'd probably solve the problem > differently (even delegation, most likely), but that doesn't mean your > solution is worse than mine would be. Some notes FWIW: > > 1. In a couple of places you're duplicating work, searching the DOM > again for something you already have (such as when unhooking the old > handler and hooking the new one) > > 2. It seems a bit odd that secondFunction is inside firstFunction, but > it's not a big deal. > > 3. The code is basically duplicated between the two functions; > recommend abstracting and parameterizing > > 4. You haven't shown where you first set up firstFunction, but I'm > guessing it has further duplication, looking something like this: > $$("input[value='height toggle']") > [0].observe('click',firstFunction); > > Without fundamentally changing how you're doing it or affecting your > markup, I'd refactor it like this: > > * * * * > functon setupToggler() { > var height; > > $$("input[value='height toggle']")[0].observe('click', handler); > > function handler(event) { > height = height === "50px" ? "100px" : "50px"; > $$("div.content").invoke("setStyle", {height: height}); > }} > > * * * * > > ...where you set it up by calling setupToggler. The event handler > doesn't change, just what it does. The frist time the event fires, > `height` will be undefined, thus not === "50px", and so it gets set to > "50px". The second time, it's === "50px" and so it gets set to > "100px". The third time it's not === "50px" again. Etc. > > The above assumes that your input with value='height toggle' is not > dynamic (e.g., you don't remove it and then add another one later). > (Your code sort of does as well, in that it won't release old one if > it changes.) > > It may also be worth generalizing it. > > FWIW, > -- > T.J. Crowder > Independent Software Consultant > tj / crowder software / comwww.crowdersoftware.com > > On May 14, 11:26 am, orbiter <dkarapet...@gmail.com> wrote: > > > > > > > A quick question about event management. I have a button that toggles > > a style field on certain elements between two different values and > > here's the code that I use: > > > function firstFunction(event) { > > $$("div[class='content']").invoke("setStyle",{height:"50px"}); > > $$("input[value='height toggle']")[0].stopObserving('click'); > > function secondFunction(event) { > > $$("div[class='content']").invoke("setStyle",{height:"100px"}); > > $$("input[value='height toggle']")[0].stopObserving('click'); > > $$("input[value='height toggle']") > > [0].observe('click',firstFunction); > > }; > > $$("input[value='height toggle']") > > [0].observe('click',secondFunction); > > > }; > > > Basically what I do is toggle between two function on the same button > > by having one set up the observer for the other by first clearing all > > the other observers, a lot like a mutually recursive set of functions > > and I'm wondering if there is a better way of doing this because I > > know javascript is prone to memory leaks and I'm trying to avoid them. > > > -- > > You received this message because you are subscribed to the Google Groups > > "Prototype & script.aculo.us" group. > > To post to this group, send email to > > prototype-scriptacul...@googlegroups.com. > > To unsubscribe from this group, send email to > > prototype-scriptaculous+unsubscr...@googlegroups.com. > > For more options, visit this group > > athttp://groups.google.com/group/prototype-scriptaculous?hl=en. > > -- > You received this message because you are subscribed to the Google Groups > "Prototype & script.aculo.us" group. > To post to this group, send email to prototype-scriptacul...@googlegroups.com. > To unsubscribe from this group, send email to > prototype-scriptaculous+unsubscr...@googlegroups.com. > For more options, visit this group > athttp://groups.google.com/group/prototype-scriptaculous?hl=en. -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
