Changes to page are delayed??

[Tony]

I'm having a problem with the execution of some code and the timing.
Basically, I want each cell in a table of images to change, followed by a
small delay, so that it creates an animation that wipes across the screen,
rather than changing all at once.

The code I'm using is:

function swapimg(cell,sr c){
document.images[cell].src = src;
}
function fillin(){
for(y=0;y<heigh t;y++){
for(x=0;x<width ;x++){
cellid=x+"x"+y;
imgsrc="blanksq uare.jpg";
setTimeout("swa pimg('"+cell+"' ,'"+imgsrc+'")" ,100);
}
}
}

That should cause there to be a delay, then the image is replace, then the
next iteration of the loop begins, right?

But what actually happens is that the delay still occurs, but the images are
all updated at once, apparently when the script completes execution.

Is there any way to get each image change to display before changing the
next image?

If this is a browser-specific situation, I'm using IE 6 with SP2.

Thanks!

[RobB]

Re: Changes to page are delayed??

Tony wrote:[color=blue]
> I'm having a problem with the execution of some code and the timing.
> Basically, I want each cell in a table of images to change, followed[/color]
by a[color=blue]
> small delay, so that it creates an animation that wipes across the[/color]
screen,[color=blue]
> rather than changing all at once.
>
> The code I'm using is:
>
> function swapimg(cell,sr c){
> document.images[cell].src = src;
> }
> function fillin(){
> for(y=0;y<heigh t;y++){
> for(x=0;x<width ;x++){
> cellid=x+"x"+y;
> imgsrc="blanksq uare.jpg";
> setTimeout("swa pimg('"+cell+"' ,'"+imgsrc+'")" ,100);
> }
> }
> }
>
> That should cause there to be a delay, then the image is replace,[/color]
then the[color=blue]
> next iteration of the loop begins, right?[/color]

Not really. setTimeout/Interval launch new threads of execution after
the timer expires: when they're called, the timer is simply set, and
the script moves on. For all intents and purposes, all the timers are
being set (almost) simultaneously, with the result that...
[color=blue]
> [ .. ] the delay still occurs, but the images are
> all updated at once, apparently when the script completes execution.
>
> Is there any way to get each image change to display before changing[/color]
the[color=blue]
> next image?[/color]

(snip)

Yes - set each timer with a longer, stepped delay:

function fillin(){
var m = 1;
for(y=0;y<heigh t;y++){
for(x=0;x<width ;x++){
cellid=x+"x"+y;
imgsrc="blanksq uare.jpg";
setTimeout("swa pimg('"+cell+"' ,'"+imgsrc+'")" , 100 * m++);
}
}
}

Why call a variable 'cellid' when it's an image name? Confusing. Can't
tell what 'height' & 'width' signify (row? column?). 'imgsrc' belongs
outside the loop. All variables should be declared locally to restrict
their scope.

Identifiers (names, ids) shouldn't begin with numbers, as parser may
take this as an indication that they *are* numbers. Probably a better
way to execute this sequence using DOM structure instead of naming
kludges...

[Lee]

Re: Changes to page are delayed??

Tony said:[color=blue]
>
>I'm having a problem with the execution of some code and the timing.
>Basically, I want each cell in a table of images to change, followed by a
>small delay, so that it creates an animation that wipes across the screen,
>rather than changing all at once.
>
>The code I'm using is:
>
>function swapimg(cell,sr c){
> document.images[cell].src = src;
>}
>function fillin(){
> for(y=0;y<heigh t;y++){
> for(x=0;x<width ;x++){
> cellid=x+"x"+y;
> imgsrc="blanksq uare.jpg";
> setTimeout("swa pimg('"+cell+"' ,'"+imgsrc+'")" ,100);
> }
> }
>}
>
>That should cause there to be a delay, then the image is replace, then the
>next iteration of the loop begins, right?[/color]

Nope.
setTimeout() does not cause any delay.
It schedules an event to happen after a delay.
You're scheduling several events to happen 100ms into the future,
but without any noticeable delay between them.

The easiest fix is to simply give each one a delay that's 100 ms
longer than the previous one:

function fillin(){
var n=0;
for(y=0;y<heigh t;y++){
for(x=0;x<width ;x++){
cellid=x+"x"+y;
imgsrc="blanksq uare.jpg";
setTimeout("swa pimg('"+cell+"' ,'"+imgsrc+'")" ,100*(++n));
}
}
}

[RobB]

Re: Changes to page are delayed??

RobB wrote:[color=blue]
> Tony wrote:[color=green]
> > I'm having a problem with the execution of some code and the[/color][/color]
timing.[color=blue][color=green]
> > Basically, I want each cell in a table of images to change,[/color][/color]
followed[color=blue]
> by a[color=green]
> > small delay, so that it creates an animation that wipes across the[/color]
> screen,[color=green]
> > rather than changing all at once.
> >
> > The code I'm using is:
> >
> > function swapimg(cell,sr c){
> > document.images[cell].src = src;
> > }
> > function fillin(){
> > for(y=0;y<heigh t;y++){
> > for(x=0;x<width ;x++){
> > cellid=x+"x"+y;
> > imgsrc="blanksq uare.jpg";
> > setTimeout("swa pimg('"+cell+"' ,'"+imgsrc+'")" ,100);
> > }
> > }
> > }
> >
> > That should cause there to be a delay, then the image is replace,[/color]
> then the[color=green]
> > next iteration of the loop begins, right?[/color]
>
> Not really. setTimeout/Interval launch new threads of execution after
> the timer expires: when they're called, the timer is simply set, and
> the script moves on. For all intents and purposes, all the timers are
> being set (almost) simultaneously, with the result that...
>[color=green]
> > [ .. ] the delay still occurs, but the images are
> > all updated at once, apparently when the script completes[/color][/color]
execution.[color=blue][color=green]
> >
> > Is there any way to get each image change to display before[/color][/color]
changing[color=blue]
> the[color=green]
> > next image?[/color]
>
> (snip)
>
> Yes - set each timer with a longer, stepped delay:
>
> function fillin(){
> var m = 1;
> for(y=0;y<heigh t;y++){
> for(x=0;x<width ;x++){
> cellid=x+"x"+y;
> imgsrc="blanksq uare.jpg";
> setTimeout("swa pimg('"+cell+"' ,'"+imgsrc+'")" , 100 * m++);
> }
> }
> }
>
> Why call a variable 'cellid' when it's an image name? Confusing.[/color]
Can't[color=blue]
> tell what 'height' & 'width' signify (row? column?). 'imgsrc' belongs
> outside the loop. All variables should be declared locally to[/color]
restrict[color=blue]
> their scope.
>
> Identifiers (names, ids) shouldn't begin with numbers, as parser may
> take this as an indication that they *are* numbers. Probably a better
> way to execute this sequence using DOM structure instead of naming
> kludges...[/color]

Hi Tony.
If you're swapping images, you might consider using CSS instead of src
resetting. This avoids messy (and sometimes unpredictable) preloading
of the new images, at the possible cost of a brief wait up front for
the user. Depends on how heavy those pics are. Sample:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.graphxkingd om.com/graphics/">
<style type="text/css">

body {
background: #404044;
}
table {
width: 340px;
margin: 100px auto;
border: 3px #fff ridge;
background: #ccc;
}
td div {
position: relative;
width: 38px;
height: 38px;
border: 1px #000 solid;
}
td img {
position: absolute;
left: 3px;
top: 3px;
width: 32px;
height: 32px;
}

</style>
<script type="text/javascript">

function seqSwap(row_id)
{
var row, cells, cell, img, i = 0;
if ((row = document.getEle mentById(row_id ))
&& (cells = row.cells))
{
while (cell = cells[i])
{
img = cell.getElement sByTagName('img ').item(0);
if (img && img.style.zInde x != '99')
{
img.style.zInde x = '99';
return;
}
i++;
}
}
clearInterval(s eqSwap.timer);
if ('undefined' != typeof nextSeq)
nextSeq(); //call next sequence (if defined)
}

function startSeq(row_id )
{
if ('undefined' != typeof seqSwap)
seqSwap.timer = setInterval('se qSwap("' + row_id + '")', 100);
}

function nextSeq()
{
startSeq("r1");
}

window.onload = function()
{
if (document.getEl ementById
&& document.getEle mentsByTagName)
{
setTimeout('sta rtSeq("r0")', 2000);
}
}

window.onunload = function()
{
if (null != seqSwap.timer)
clearInterval(s eqSwap.timer);
}

</script>
</head>
<body>
<table>
<tbody>
<tr id="r0">
<td><div><img src="food/food02.gif"><im g
src="mammals/mam01.gif"></div></td>
<td><div><img src="food/food06.gif"><im g
src="mammals/mam02.gif"></div></td>
<td><div><img src="food/food08.gif"><im g
src="mammals/mam03.gif"></div></td>
<td><div><img src="food/food09.gif"><im g
src="mammals/mam04.gif"></div></td>
<td><div><img src="food/food10.gif"><im g
src="mammals/mam05.gif"></div></td>
<td><div><img src="food/food11.gif"><im g
src="mammals/mam06.gif"></div></td>
<td><div><img src="food/food12.gif"><im g
src="mammals/mam07.gif"></div></td>
<td><div><img src="food/food13.gif"><im g
src="mammals/mam08.gif"></div></td>
<td><div><img src="food/food14.gif"><im g
src="mammals/mam09.gif"></div></td>
<td><div><img src="food/food18.gif"><im g
src="mammals/mam10.gif"></div></td>
</tr>
<tr id="r1">
<td><div><img src="toys/toy02.gif"><img
src="computers/comp01.gif"></div></td>
<td><div><img src="toys/toy06.gif"><img
src="computers/comp02.gif"></div></td>
<td><div><img src="toys/toy08.gif"><img
src="computers/comp03.gif"></div></td>
<td><div><img src="toys/toy09.gif"><img
src="computers/comp04.gif"></div></td>
<td><div><img src="toys/toy10.gif"><img
src="computers/comp05.gif"></div></td>
<td><div><img src="toys/toy11.gif"><img
src="computers/comp06.gif"></div></td>
<td><div><img src="toys/toy12.gif"><img
src="computers/comp07.gif"></div></td>
<td><div><img src="toys/toy13.gif"><img
src="computers/comp08.gif"></div></td>
<td><div><img src="toys/toy14.gif"><img
src="computers/comp09.gif"></div></td>
<td><div><img src="toys/toy18.gif"><img
src="computers/comp10.gif"></div></td>
</tr>
</tbody>
</table>
</body>
</html>

setInterval is more logical for animations, where the idea is to keep
going until you're ready to stop - not to keep going & stopping until
you're ready to stay stopped. Runs more efficiently, and no memory leak
issues afaik.

[Tony]

Re: Changes to page are delayed??

"RobB" <ferndoc9@hotma il.com> wrote in message
news:1114569666 .225749.218070@ o13g2000cwo.goo glegroups.com.. .[color=blue]
>
> (snip)
>
> Yes - set each timer with a longer, stepped delay:
>
> function fillin(){
> var m = 1;
> for(y=0;y<heigh t;y++){
> for(x=0;x<width ;x++){
> cellid=x+"x"+y;
> imgsrc="blanksq uare.jpg";
> setTimeout("swa pimg('"+cell+"' ,'"+imgsrc+'")" , 100 * m++);
> }
> }
> }[/color]

Thanks Rob, (and Lee) - that helps a lot. I'll try it out tonight!
[color=blue]
> Why call a variable 'cellid' when it's an image name? Confusing. Can't
> tell what 'height' & 'width' signify (row? column?). 'imgsrc' belongs
> outside the loop. All variables should be declared locally to restrict
> their scope.[/color]

Actually, I dropped a couple lines in the original source - basically, code
that was functioning properly and irrelevant to the question. The grid is
dynamically generated in PHP, with each "cell" of the grid (actually, each
IMG tag) given a name like 0x0,1x0,2x0, etc., so the corresponding
JavaScript can address the cell by X/Y coordinates as needed. The[color=blue][color=green]
>>imgsrc="blank square.jpg"<< was put there to simplify the overall code, as[/color][/color]
what actually happens is the value for the original image is retreived, and
a new image (of a different color) is substituted in its place.
[color=blue]
> Identifiers (names, ids) shouldn't begin with numbers, as parser may
> take this as an indication that they *are* numbers. Probably a better
> way to execute this sequence using DOM structure instead of naming
> kludges...[/color]

In your other post, you mentioned CSS - I was thinking of going that route
eventually, but I'm currently working on the program logic, and being less
familiar with CSS (been learning it for a couple weeks so far), I figured
I'd work out the logic using straight HTML so I wouldn't get distracted. The
code isn't 'lean & clean' yet, since I'm trying to work a few things out
before cleaning it all up.

Again, thanks for the help.

If you want to see what all this does, check out

https://www.mylittlewebstore.com/knot/