ansaurus

Question

jQuery- Please explain to me Closure, variable context

Answer 1

+3 A:

This is because in your first call you're actually creating a Function object which will be processed only after the DOM has loaded, in another context.

That anonymous function will be called when all the elements in the page have already loaded, so the caller will be a jQuery core function and its context is completely different from the one you're coding here.

I'd suggest wrapping everything inside the $() call, so this should work:

(function($) {
        $(function() {
            var ctx = $("#canvas")[0].getContext('2d');
            var x = 150;
            var y = 150;
            var dx = 2;
            var dy = 4;

            setInterval(draw, 10);

            function draw() {
                    ctx.clearRect(0,0,300,300);
                    ctx.beginPath();
                    ctx.arc(x,y,10,0,Math.PI*2,true);
                    ctx.closePath();
                    ctx.fill();
                    x+=dx;
                    y+=dy;
            }
        });
})(jQuery);

Seb 2009-05-12 04:37:57

What Seb says is correct. the first one doesn't work because at the time that you try to get your canvas object it hasn't actually been loaded yet.

Darko Z 2009-05-12 05:36:36

While you're right about wrapping the code inside the callback, you are *wrong* about the context issue. The problem is probably that the javascript code is being run before the canvas tag is declared. I've demonstrated this in my answer.

brianpeiris 2009-05-12 05:52:03

Thanks. I was just experimenting with the way this thing works. I understand it now.

rymn 2009-05-12 06:18:14

@Seb Sorry if I'm nagging you about this but please consider editing your answer to correct or remove the remarks about context. Unless I'm completely mistaken they are simply incorrect and misleading. Thanks.

brianpeiris 2009-05-12 17:09:15

@brian I'm really not sure about the context issue; I believed I was right but now I doubt it and should test it.@Rymn, can you tell us if the real problem was that you were trying to access the canvas before it was actually created? If so, please mark brian answer as correct instead of mine. Thanks.

Seb 2009-05-12 17:23:42

Answer 2

+3 A:

I think you've mistaken the problem. It is not that you have misunderstood your variable context but probably that you are running the javascript before your canvas tag has been declared.

The following code demonstrates the problem. It will display the message "canvasOne is undefined!" because we are trying to access canvasOne before it is declared (Note the placement of the <canvas> tags).

I've created a hosted demo here: http://jsbin.com/afuju (Editable via http://jsbin.com/afuju/edit)

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  </head>
  <body>
    <script>
      /* 
        The following line of code is run as soon as the browser sees it.
        Since the "canvasOne" tag is not declared yet, the variable will be undefined.
      */
      var canvasOne = $('#canvasOne')[0];

      $(function() {
        // The following code is run after the whole document has finished loading.
        if (canvasOne === undefined) {
          alert('canvasOne is undefined!');
        }
        else {
          canvasOne.getContext("2d").fillRect(5, 5, 15, 15);
        }
      });
    </script>
    <canvas id="canvasOne"></canvas>



    <canvas id="canvasTwo"></canvas>

    <script>
      /* 
        The following line of code is run as soon as the browser sees it.
        But since the "canvasTwo" tag *is* declared above, the variable will *not* be undefined.
      */
      var canvasTwo = $('#canvasTwo')[0];

      $(function() {
        // The following code is run after the whole document has finished loading.
        if (canvasTwo === undefined) {
          alert('canvasTwo is undefined!');
        }
        else {
          canvasTwo.getContext("2d").fillRect(5, 5, 15, 15);
        }
      });
    </script>



    <script>
      $(function() {
        /*
          The following code is run after the whole document has finished loading.
          Hence, the variable will *not* be undefined even though the "canvasThree" tag appears after the code.
        */
        var canvasThree = $('#canvasThree')[0];
        if (canvasThree === undefined) {
          alert('canvasThree is undefined!');
        }
        else {
          canvasThree.getContext("2d").fillRect(5, 5, 15, 15);
        }
      });
    </script>

    <canvas id="canvasThree"></canvas>
  </body>
</html>

brianpeiris 2009-05-12 05:50:48

Thanks Brian Peiris!

rymn 2009-05-12 06:18:57

+1 for demo deployed

Seb 2009-05-12 14:24:03

ansaurus

tags:

views:

answers:

jQuery- Please explain to me Closure, variable context

related questions