Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question I'm not sure why this code is timing out

    UPDATE 2: I've moved the while loop inside the click function and the script stops timing out. How do I handle a click event inside a loop and is there anyway to have paths created with a variable starting point?


    I've been fiddling with this for hours stripping down pieces step by step and I can't figure out what my problem is! Everything works up until the while loop:
    Code:
    window.onload = function() {
        var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    		 
    		//Draw Nodes array
    		var nodes = new Array(10);
    		for (x = 0; x < nodes.length; x++)
    		{
    		 for (y = 0; y < x; y++)
    		 {
    		 nodes[x]= new Array(y);
    		 var w = 50 + 40*x;
    		 var h = 50 + 40*y;
    		 paper.circle(h, w, 10).attr({fill: '#0000FF'});
    		 } 
    		} 
    		//Establish counter matrix
    		var counter = new Array(10);
    				for (k = 0; k < counter.length; k++)
    				counter [k] = new Array(10);
    				
    		//next button
    		var rect = paper.rect(10, 10, 50, 25);
    		rect.attr({fill: '#9cf', stroke: 'none'});
    		var text = paper.text(33, 23, 'Next')  
    		text.attr({'font-size': 12});
    		rect.node.onmouseover = function() {  
        this.style.cursor = 'pointer';
    	  }
    		//next particle	
    		var i = 0;
    		var j = 0;
    		while (i < 10)
    		{
    		 rect.node.onclick = function() 
    		 {  
    		 		var t = 50 + 15*i;
    				var s = 50 + 15*j;
         		if (counter [i][j]%(i+2)<(i+1-j))
    				{
    				paper.circle(s, t, 10).attr({fill: '#0000FF'});
    				var left = paper.path("M t s l 0 40");
    				left.attr({stroke:'#8B008B','stroke-width': 5});
    				counter[i][j]+=1
    				i+=1;
    				}
    				else if (counter[i][j]%(i+2)<(i+2))
    				{
    				paper.circle(s, t, 10).attr({fill: '#FF0000'});
    				var right = paper.path("M t s l 40 40");
    				right.attr({stroke:'#8B008B','stroke-width': 5});
    				counter[i][j]+=1
    				i+=1;
    				j+=1;
    				}
    			};
        };  
    }
    Can anyone catch my mistake(s) or find a better way for me to accomplish the above task?

    I also need to figure out how to erase the path I'm attempting to draw once I've cycled through the array without losing the new colored nodes or resetting the counter settings and loop back through the system again.

    I'm really new to programming so I'm sure there are about a billion mistakes! Any help you can give will be greatly appreciated!

    UPDATE: I commented out my code line by line and found that my first issue lies with the onclick line right after I initiate the while loop. I honestly have no idea what the actual issue there is.
    Last edited by Kathya; 03-07-2013 at 12:55 PM. Reason: New problems!

  • #2
    New Coder
    Join Date
    Jan 2013
    Posts
    71
    Thanks
    3
    Thanked 2 Times in 2 Posts
    I think you have made mistake in this section

    var counter = new Array(10);
    for (k = 0; k < counter.length; k++)
    counter [k] = new Array(10);

    //next button
    var rect = paper.rect(10, 10, 50, 25);
    rect.attr({fill: '#9cf', stroke: 'none'});
    var text = paper.text(33, 23, 'Next')
    text.attr({'font-size': 12});
    rect.node.onmouseover = function() {

    Check it out once again.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,458
    Thanks
    0
    Thanked 632 Times in 622 Posts
    elseif is not defined so the rest of the content below that will never run. Try placing a space between the e and the i
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by RobertWoges View Post
    I think you have made mistake in this section

    var counter = new Array(10);
    for (k = 0; k < counter.length; k++)
    counter [k] = new Array(10);

    //next button
    var rect = paper.rect(10, 10, 50, 25);
    rect.attr({fill: '#9cf', stroke: 'none'});
    var text = paper.text(33, 23, 'Next')
    text.attr({'font-size': 12});
    rect.node.onmouseover = function() {

    Check it out once again.
    This part actually worked completely fine before I added in the while loop following it.

  • #5
    New Coder
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    elseif is not defined so the rest of the content below that will never run. Try placing a space between the e and the i
    Thanks for the tip! Unfortunately even with the space I run into a slow script error. Is it possible that I have too much going on in one script? It seems pretty basic to me but as I've said I have no real experience.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Can you show this live?

    Clearly, unless we download and install Raphael, and, and, and, we can't debug it as is.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Kathya View Post
    Is it possible that I have too much going on in one script?
    yes, very very very possible. It's not even so much what you've written as much as the library you are using. While there are some minor tweaks you could make here and there to speedup your code, there's no glaring bottleneck.


    try lowering the counts and see if that helps. If it does, you're doing to much at once.

    as far as erasing the paths, draw a clear or white shim behind the moving object.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •