473,320 Members | 1,933 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Changes to page are delayed??

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,src){
document.images[cell].src = src;
}
function fillin(){
for(y=0;y<height;y++){
for(x=0;x<width;x++){
cellid=x+"x"+y;
imgsrc="blanksquare.jpg";
setTimeout("swapimg('"+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!
Jul 23 '05 #1
4 1144
Tony wrote:
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,src){
document.images[cell].src = src;
}
function fillin(){
for(y=0;y<height;y++){
for(x=0;x<width;x++){
cellid=x+"x"+y;
imgsrc="blanksquare.jpg";
setTimeout("swapimg('"+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?
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...
[ .. ] 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?


(snip)

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

function fillin(){
var m = 1;
for(y=0;y<height;y++){
for(x=0;x<width;x++){
cellid=x+"x"+y;
imgsrc="blanksquare.jpg";
setTimeout("swapimg('"+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...

Jul 23 '05 #2
Lee
Tony said:

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,src){
document.images[cell].src = src;
}
function fillin(){
for(y=0;y<height;y++){
for(x=0;x<width;x++){
cellid=x+"x"+y;
imgsrc="blanksquare.jpg";
setTimeout("swapimg('"+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?


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<height;y++){
for(x=0;x<width;x++){
cellid=x+"x"+y;
imgsrc="blanksquare.jpg";
setTimeout("swapimg('"+cell+"','"+imgsrc+'")",100* (++n));
}
}
}

Jul 23 '05 #3
RobB wrote:
Tony wrote:
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,src){
document.images[cell].src = src;
}
function fillin(){
for(y=0;y<height;y++){
for(x=0;x<width;x++){
cellid=x+"x"+y;
imgsrc="blanksquare.jpg";
setTimeout("swapimg('"+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?


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...
[ .. ] 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?
(snip)

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

function fillin(){
var m = 1;
for(y=0;y<height;y++){
for(x=0;x<width;x++){
cellid=x+"x"+y;
imgsrc="blanksquare.jpg";
setTimeout("swapimg('"+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...


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.graphxkingdom.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.getElementById(row_id))
&& (cells = row.cells))
{
while (cell = cells[i])
{
img = cell.getElementsByTagName('img').item(0);
if (img && img.style.zIndex != '99')
{
img.style.zIndex = '99';
return;
}
i++;
}
}
clearInterval(seqSwap.timer);
if ('undefined' != typeof nextSeq)
nextSeq(); //call next sequence (if defined)
}

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

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

window.onload = function()
{
if (document.getElementById
&& document.getElementsByTagName)
{
setTimeout('startSeq("r0")', 2000);
}
}

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

</script>
</head>
<body>
<table>
<tbody>
<tr id="r0">
<td><div><img src="food/food02.gif"><img
src="mammals/mam01.gif"></div></td>
<td><div><img src="food/food06.gif"><img
src="mammals/mam02.gif"></div></td>
<td><div><img src="food/food08.gif"><img
src="mammals/mam03.gif"></div></td>
<td><div><img src="food/food09.gif"><img
src="mammals/mam04.gif"></div></td>
<td><div><img src="food/food10.gif"><img
src="mammals/mam05.gif"></div></td>
<td><div><img src="food/food11.gif"><img
src="mammals/mam06.gif"></div></td>
<td><div><img src="food/food12.gif"><img
src="mammals/mam07.gif"></div></td>
<td><div><img src="food/food13.gif"><img
src="mammals/mam08.gif"></div></td>
<td><div><img src="food/food14.gif"><img
src="mammals/mam09.gif"></div></td>
<td><div><img src="food/food18.gif"><img
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.

Jul 23 '05 #4
"RobB" <fe******@hotmail.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...

(snip)

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

function fillin(){
var m = 1;
for(y=0;y<height;y++){
for(x=0;x<width;x++){
cellid=x+"x"+y;
imgsrc="blanksquare.jpg";
setTimeout("swapimg('"+cell+"','"+imgsrc+'")", 100 * m++);
}
}
}
Thanks Rob, (and Lee) - that helps a lot. I'll try it out tonight!
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.
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
imgsrc="blanksquare.jpg"<< was put there to simplify the overall code, as

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.
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...


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
www.mylittlewebstore.com/knot/
Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Leo Breebaart | last post by:
Hi all, I have a question about Python and delayed evaluation. Short-circuiting of Boolean expressions implies that in: >>> if a() and b(): any possible side-effects the call to b() might...
6
by: Quick Function | last post by:
Hi, I developed a site and used css. I put almost all style information in the css and used a lot of "id=my_css_class" in the html. They is little style specification in the html. I found that on...
0
by: subi | last post by:
Hi, I don't know where's the best place to post my question. I hope it suits this group. I have created an assembly with a delay sign attribute set to true in the AssemblyInfo.cs. And the key...
8
by: Nicolás Lichtmaier | last post by:
Hi, some time ago I've written an article about this issue. It explain some differences in Explorer's and Mozilla's JavaScript/DOM. It has recently changed its URL, This is the new one: ...
16
by: Alvin Bruney | last post by:
I'm observing that a sleeping thread changes to stopped after a while. Is that accepted framework behavior for web applications? My thread basically does some work, and sleeps for 60 minutes...
0
by: e | last post by:
I've got an asp.net website using role-based, forms authentication against active directory. The website has been using the LogonUser api on every Authenticate_Request to impersonate the user as...
4
by: James Hancock | last post by:
I have a page, which is inherited from another page (PageEx is what I call it) All of our pages are based on PageEx because there is a bunch of logic stuff we do in there. My problem is, that if...
9
by: Tim D | last post by:
Hi, I originally posted this as a reply to a rather old thread in dotnet.framework.general and didn't get any response. I thought it might be more relevant here; anyone got any ideas? My...
2
by: Ed | last post by:
I am using Form Authentication with the new authentication controls in ASP.NET 2.0. I would like to be able to check to see if the user's session has timed out and redirect them to a page to allow...
16
by: =?UTF-8?B?SXbDoW4gU8OhbmNoZXogT3J0ZWdh?= | last post by:
Mo wrote: Instead of echo()ing everything, store it in a string variable. Then, sum what you need to, then echo() the sum, then echo() the string holding the (delayed) output. Cheers, --...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.