Response title
This is preview!
Move this topic
slowing .each iteration rate
in Getting Started
•
8 years ago
Is there a way to slow the interation rate when using .each ?
I would like to watch what is happening as it goes along.
1
Replies(10)
Re: slowing .each iteration rate
8 years ago
Is this some sort of animation or something? What are you iterating over that you need/want to watch it?
Dave
Why not just write info the console so you can see what it is doing?
If you want to really slow it down use an alert instead and it will stop until you dismiss the alert.
Dave
Leave a comment on dsvick's reply
Re: slowing .each iteration rate
8 years ago
you can make it slow using animation and to stop if you needed in middle of process you can use following method
Stop(): The jQuery stop() method is used to stop an animation or effect before it is finished.
Leave a comment on shivramweb's reply
Re: slowing .each iteration rate
8 years ago
thank you for your replies and suggestions.
this is not an animation. the code uses a .each to designate and draw small square divs into which the next line of code pastes an image. i put in an alert to stop the process at each iteration, just so i could be sure i understood what was going on. to slow things down a bit for easier understanding.
while the alert did slow things down for the execution of the first element, it doesn't for the second.
Here is my 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) {
- $("#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>
i have tried many variations and combinations of alerts, position changes, in & out of the first function, but i can't get the second command (line 41) to step through.
i don't get why the first command (line 39) steps thru, including the "oop" alert, then shows the "mope" alert, then executes line 41 with no stepping at all.
Leave a comment on pratto's reply
Leave a comment on kbwood.au's reply
Re: slowing .each iteration rate
8 years ago
yes. but my question is, why doesn't it pause before filling in each .jpg background, like it does when making the boxes.
Leave a comment on pratto's reply
Re: slowing .each iteration rate
8 years ago
.each does everything one iteration after the other with no delay. So, I wrote a plugin that delays
JΛ̊KE
Do you think ogni() will help you?
JΛ̊KE
Re: Re: slowing .each iteration rate
8 years ago
ogni – delayed each plugin - JSFiddle implements $.ogni and $( selector ).ogni to work similar to both each methods.
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
Re: slowing .each iteration rate
8 years ago
thank you Jake. after all the work you put into it, i am very reluctant explain that, i don't have a use for ogni, because i am just trying to understand the behavior of $.each. in my code (the hard part of which was given to me a year ago in another forum) $,each works just fine, and i use it in my website. annoyingly tho, i still don't fully understand it.
it boils down to this - why do the alerts allow for stepping thru the new divs, but not for the setting of the background image in them ?
again, thanks for the ogni code. it works nicely, but is not what i am looking for. i didn't explain myself well enough.
pat
Leave a comment on pratto's reply
Re: slowing .each iteration rate
8 years ago
Alerts are evil. They stop everything in the browser window. Some things that you do to the DOM before the alert don’t show up until after the alert. They mess with us while we are debugging, because the page behaves differently when the alerts are removed.
JΛ̊KE
$.each is just a for loop, with a closure. The closure part is difficult to understand some times. It enables local variables to be declared inside the loop. A for loop, by itself, does not get true local variables. If you don’t need the closure, you might as well use a for loop.
I’ve had the ogni code in the back of my head for a while. I thought it might help here, or help to show one way to slow down .each loops.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: slowing .each iteration rate
8 years ago
ok. that helps. I know that some people consider using alerts to be poor coding.
and that may very well account for what i think is strange behavior.
surprisingly, i think i have a pretty good grasp of closure, and understand what you said. i had tried moving things around inside the function, and even setting up another function (so closure wouldn't block a variable), but couldn't get any combination to work.
so at this point, what it amounts to is, the code works, but throwing in alerts to debug it, doesn't.
Leave a comment on pratto's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to pratto's question