Hi,

What's the wider context of that code? In particular, what happens to
`weather_table_one` after the code you've shown? Because if you're
modifying it (for instance, in a loop), that's your problem. The
`replace_weather_table` function is a closure over the
`weather_table_one` variable, which means it has a *live* reference to
it (not a copy of it).

Here's a simple example of the effect: http://jsbin.com/ujera3
* * * *
document.observe("dom:loaded", function() {

  var index, div;
  for (index = 0; index < 5; ++index) {
    div = new Element('div');
    div.update("I'm div #" + index + ". Click me.");
    div.observe('click', function(event) {
      event.stop();
      alert("Index = " + index);
    });
    document.body.appendChild(div);
  }

});
* * * *

You might thing that if you clicked div #0, it would say "Index = 0",
and if you clicked div #1, it would say "Index = 1". But it doesn't.
It always says "Index = 5", because that's the *current* value of the
`index` variable as of the time the click handler is called.

You can break that link so that the function deals with the value at a
point in time. The usual way is to do it with a function call:
http://jsbin.com/ujera3/2
* * * *
document.observe("dom:loaded", function() {

  var index, div;
  for (index = 0; index < 5; ++index) {
    div = new Element('div');
    div.update("I'm div #" + index + ". Click me.");
    // Create a function that accepts an argument
    (function(thisIndex) {
      div.observe('click', function(event) {
        event.stop();
        // Use the argument
        alert("thisIndex = " + thisIndex);
      });
    })(index); // <== pass in the current value of `index` as the
argument
    document.body.appendChild(div);
  }

});
* * * *
The event handler is still a closure. In fact, it's a closure over two
things: 1. The execution context of the main code, and 2. The
execution context of *that particular call* to the anonymous function
we added. Since the event handler is using the `thisIndex` argument
*of a particular call context*, and that argument is never changed, it
works as you expect. Mind you, I wouldn't recommend the above code
literally, it's a bit expensive in terms of creating extra contexts,
I'd usually try to find some other way to get the information to the
handler. But for these purposes, it's useful for showing how the
closure works.

More here:
http://blog.niftysnippets.org/2008/02/closures-are-not-complicated.html

HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com


On Sep 21, 5:22 pm, nephish <[email protected]> wrote:
> Not sure if my problem is the javascript function, or how i have the
> PeriodicalExecuter set up. The action works, the element is updated
> with new info, but the old contents are not removed.
>
> map.addOverlay(weather_table_one);
>          // action when map is moved
>         function replace_weather_table(){
>              map.removeOverlay(weather_table_one);
>              zoomy = map.getZoom();
>              new Ajax.Request('/pivrain2/update_weather_tables', {
>                 parameters: {
>                     zoom: zoomy
>                 }
>              })
>          };
>
>          new PeriodicalExecuter(replace_weather_table, 30);
>
> would appreciate any help
>
> skrite

-- 
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 [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to