screen updates don't match program logic/state or order

[robert]

hi!

there's a line in my Javascript program that makes a change in the
appearance of an area of the screen. it is a game program, so there are
a cascade of changes after the user makes a move. these are carefully
sequenced and timed in a loop which contains the "action" statement

document.images[k].src = offGIF[currNode];

unfortunately, the *actual* screen updating appears to be 1)
asynchronous and 2) faulty!

_asynchronou_s in that things change in the wrong order, as if each has
its own thread and they run at random.

_faulty_ in that occasionally an area that would change from, say,
picture1.gif to picture2.gif and back again (according to game logic)
lands up showing picture2.gif. even though the internal game logic has
it recorded (and i assume document.images[k].src would be correct, even
though the screen is not) as picture1.

so.

is there a way to wait or surrender control to the system until the
program statement's intent has actually been rendered to the screen?
something i can test to see if the unerlying system mechanism has caught
up with all changes to document.images?

-- rob

 

[Martin Honnen]

hi!

there's a line in my Javascript program that makes a change in the
appearance of an area of the screen. it is a game program, so there are
a cascade of changes after the user makes a move. these are carefully
sequenced and timed in a loop which contains the "action" statement

document.images[k].src = offGIF[currNode];

unfortunately, the *actual* screen updating appears to be 1)
asynchronous and 2) faulty!

_asynchronou_s in that things change in the wrong order, as if each has
its own thread and they run at random.

_faulty_ in that occasionally an area that would change from, say,
picture1.gif to picture2.gif and back again (according to game logic)
lands up showing picture2.gif. even though the internal game logic has
it recorded (and i assume document.images[k].src would be correct, even
though the screen is not) as picture1.

so.

is there a way to wait or surrender control to the system until the
program statement's intent has actually been rendered to the screen?
something i can test to see if the unerlying system mechanism has caught
up with all changes to document.images?

Loading images takes time, if you assign to
imgElement.src
then the statement just triggers the change and then returns.
If needed you can use the onload handler of the img object
imgElement.onload = function (evt) {
imgElement2.src = 'whatelse.gif';
}
imgElement.src = 'whatever.gif';