Can't access element from a named javascript function

Question

I have a javascript function, that works fine if it's anonymous but stops working when I change it to named.. Why?

here is the code that works:

setInterval( function(){
<% @root.children.all(:order  => "idx DESC").each do |child| %>
        var text2 =    "<%= child.content %>";
      var pjs = Processing.getInstanceById("mysketch2");
    pjs.update(text2);
    <% end %>

}, 3000)

Here is the code that does not work..

<script>
  var interval = setInterval(drawGraph(),1000);
    function drawGraph(){
  <% @root.children.all(:order  => "idx DESC").each do |child| %>
        var text2 =    "<%= child.content %>";
        var pjs = Processing.getInstanceById("mysketch2");
        pjs.update(text2);
      <% end %>

     }

</script>

I get the 'Uncaught TypeError: Cannot call method 'update' of undefined'. The strangest part is that I can see that the Processing.js window is getting drawn on screen but that's it.. With the working version (the first one in this post) everything is fine and contents of the window also get drawn..

I tried putting pjs into a global variable outside of drawGraph() function, but no luck... What am I missing? Thanks!

Answer 1

It should be

setInterval(drawGraph,1000);

not

setInterval(drawGraph(),1000);

Also the function should be declared before the setInterval statement

Answer 2

The two snippet of code are not equivalent: in the first one you are passing to the setInterval function a reference to an unnamed function. In the second snippet you are calling drawGraph() and then pass the result value to setInterval.

Try with:

var interval = setInterval(drawGraph, 1000);

and move the definition of drawGraph before the call to setInterval.