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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts

    slowing $.each iteration rate

    Is there a way to slow the interation rate when using $.each ?
    I would like to watch what is happening as it goes along.

    I realize that this is not a jquery forum, but maybe someone will let it pass and lend a hand.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by pratto View Post
    I realize that this is not a jquery forum […]
    Then open your eyes and read what’s written below the titles of the sub forums.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,285
    Thanks
    23
    Thanked 611 Times in 610 Posts
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by sunfighter View Post
    how would that look?
    this doesn't work:
    Code:
    $("a").each(function(a,b){console.log(b)}).delay(300)

    since $.each acts like [].map, it has scope and can use setTimeout without extra precation, so you can easily code a special function to pass to each() that timeouts its call:
    Code:
    $("a").each(function(a,b){
     setTimeout( function(){ console.log(b); }, a * 300);
    })
    or, using a modern approach:

    Code:
    $("a").each(function(a,b){
     setTimeout( console.log.bind(console, b), a * 300);
    })
    Last edited by rnd me; 01-23-2014 at 04:23 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,285
    Thanks
    23
    Thanked 611 Times in 610 Posts
    Your right rnd me, setTimeout() works best here.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I had looked thru the sub forums descriptions, and missed jquery. my mistake.

    I guess the purpose of a moderator is to :
    1-point out that a thread is in the wrong forum;
    2-move it there;
    3-be rude

    rnd me & sunfighter, thanks for the help. but somehow, i can't get it to work. maybe i am lost in my parenthesis or braces.

    attached is the code if you'd care to take a look.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <title> 3 test</title>
    <meta charset='utf-8'>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    
    <style>
    
    body{display:block; padding:0px; margin:0px; background-color:gray; overflow:auto;}
    .thumb{width:150px; height:150px; margin-left:8px; margin-top:0px; margin-bottom:8px; padding-bottom:0px; float:left; background-position: 50% 100%; background-size:cover; border:3px solid white;}
    
     </style>
     
     <script>
     $(document).ready(function() 
    {
    var manifest=												
    	{
    		1:{
            available:"n",
    		filename:"c.jpg",
    		},
            
    		5:{
            available:"n",
    		filename:"pic2.jpg",
    		},
    		
    		7:{
            available:"n",
    		filename:"pic3.jpg",
    		}
    		}
    		
    		$.each(manifest, function(param1, param2) {
    		
    		
    		setTimeout( function(){ console.log(param2); }, param1 * 300);
    })
    		
    		$("#thumb").append("<button type='button' id='"+param1+"' class='thumb'></button>");		//the first parameters are 1,5,7
    		
    		$("#"+param1).css('background-image', 'url("D:/JS Practice/'+param2.filename+'")');   		//the second parameters are contained in pairs inside the braces {}
    																										//this statement says, for each first parameter id'd div,
    																										//the background image URL is the second parameter's value
    		//alert("oop");
    																											
    		});
    		//alert("mope");
    		});
    	
    		
    		</script>
     
     </head>
     
    <body>
            
    <div id="visiblePage">
    <div id="thumbBox">
    <div id="thumb"></div>
    </div>
    </div>
      
    </body>
    
    </html>

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ... but for the sort of debugging you're talking about, I find an alert() to be sweet and simple enough - it stops the code running for as long as you want it to (it won't resume until you click ok) and lets you display variables...
    Code:
     <script>
     $(document).ready(function() {
    var manifest=												
    	{
    		1:{
            available:"n",
    		filename:"c.jpg",
    		},
            
    		5:{
            available:"n",
    		filename:"pic2.jpg",
    		},
    		
    		7:{
            available:"n",
    		filename:"pic3.jpg",
    		}
    		}
    		
    		$.each(manifest, function(param1, param2) {
    		$("#thumb").append("<button type='button' id='"+param1+"' class='thumb'></button>");		//the first parameters are 1,5,7
    		$("#"+param1).css('background-image', 'url("D:/JS Practice/'+param2.filename+'")');   		//the second parameters are contained in pairs inside the braces {}
    		alert("param1: "+param1+"\nparam2.filename: "+param2.filename);
    
    		});
    	});
    		
    		</script>

  • #8
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    What i am trying to achieve is to make the painting of each div (background image) break between each, using alert, like the making of the boxes does. but i haven't figured out a way to do it.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    not entirely sure I get that...

    you want to break on each box appearance, then loop through and add the backgrounds later with breaks on that as well?

  • #10
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    well, yes. but only to help me understand how $.each is working.
    i really don't care about making it stop during filling in the backgrounds. that was just my attempt at, debugging or understanding, in a step by step way.

    the bottom line is, can you explain to me why the alerts effect the first looping of .each, but not the second (the filling in part)?

    below is the code (which you were nice enough to write for me a year ago) with a couple of alerts added for decrypting what is happening.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <title>test</title>
    <meta charset='utf-8'>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    
    <style>
    
    body{display:block; padding:0px; margin:0px; background-color:gray; overflow:auto;}
    .thumb{width:150px; height:150px; margin-left:8px; margin-top:0px; margin-bottom:8px; padding-bottom:0px; float:left; background-position: 50% 100%; background-size:cover; border:3px solid white;}
    
     </style>
     
     <script>
     $(document).ready(function() 
    {
    var manifest=												
    	{
    		1:{
            available:"n",
    		filename:"c.jpg",
    		},
            
    		5:{
            available:"n",
    		filename:"pic2.jpg",
    		},
    		
    		7:{
            available:"n",
    		filename:"pic3.jpg",
    		}
    		}
    		
    		$.each(manifest, function(param1, param2) {
    																										// notes to myself -
    		$("#thumb").append("<button type='button' id='"+param1+"' class='thumb'></button>");		//the first parameters are 1,5,7
    		
    		$("#"+param1).css('background-image', 'url("D:/JS Practice/'+param2.filename+'")');   		//the second parameters are contained in pairs inside the braces {}
    																										//this statement says, for each first parameter id'd div,
    																										//the background image URL is the second parameter's value
    																										//that is associated with "filename"
    		alert("oop");
    																											
    		});
    		alert("mope");
    		});
    	
    		
    		</script>
     
     </head>
     
    <body>
            
    <div id="visiblePage">
    <div id="thumbBox">
    <div id="thumb"></div>
    </div>
    </div>
      
    </body>
    
    </html>
    your code works like a champ, but part of it mystifies a dunce.

  • #11
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    what i am getting at isn't really apparent unless you give it a valid directory and 3 .jpg's to fill in.

    i have set up this fiddle, but haven't figured out how to bring in images to it.

    http://jsfiddle.net/pratto/wtMZr/
    Last edited by pratto; 01-24-2014 at 07:38 AM.

  • #12
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by pratto View Post
    i really don't care about making it stop during filling in the backgrounds. that was just my attempt at, debugging or understanding, in a step by step way.

    the bottom line is, can you explain to me why the alerts effect the first looping of .each, but not the second (the filling in part)?
    .
    if you format the JS nicer (i used danml.com/slim), i think it's visually evident what the issue is:

    Code:
     $(document).ready(function() {
     	var manifest = {
     		1: {
     			available: "n",
     			filename: "c.jpg",
     		},
    
     		5: {
     			available: "n",
     			filename: "pic2.jpg",
     		},
    
     		7: {
     			available: "n",
     			filename: "pic3.jpg",
     		}
     	}
    
     	$.each(manifest, function(param1, param2) {
     		// notes to myself -
     		$("#thumb").append("<button type='button' id='" + param1 + "' class='thumb'></button>"); //the first parameters are 1,5,7
    
     		$("#" + param1).css('background-image', 'url("D:/JS Practice/' + param2.filename + '")'); //the second parameters are contained in pairs inside the braces {}
     		//this statement says, for each first parameter id'd div,
     		//the background image URL is the second parameter's value
     		//that is associated with "filename"
     		alert("oop");
    
     	});
     	alert("mope");
     });
    there is no second loop, just an alert at the end of ready()...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #13
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    and yet a second loop (instance of .each) does take place.

    the first loop begins with : $("#thumb").append

    the second begins with : $("#" + param1).css


    if you put in a (or 3) .jpg's, you will see it happen.


    i set up a fiddle to demonstrate it, but i can't figure out how to get it to use .jpg's. i guess it wants an external reference to an image, but that i don't know how to do. yet.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    no. it's the same loop, there are just two things happening inside that loop.

    Imagine you're running around a track. You do one lap and pass bob and bill on the way. One loop, two things.

    Then you run around the track twice. Say "hi bob" on the first lap then "hi bill" on the second.

    that's kind of not really but sort of the difference.

  • #15
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I finally got a fiddle to work - http://jsfiddle.net/pratto/VkaH6/21/

    for some reason it starts as soon as you go to the site. but if you hit ok until the main jsfiddle appears, then hit run, you can see what i mean.

    it shows that, following your analogy, it says hello bob, hello bob, hello bob, then hello bill bill bill.

    somebody told me that they thought using alert may be causing the problem because it interacts strangely with the DOM. so i tried using setInterval, but couldn't get it to go at all.

    it's kind of laughable. i'm just trying to freeze frame my way thru .each so as to watch which elements it works on, in what order.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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