JavaScript Pause after each iteration AND update body?

[Michael E]

This is probably a really stupid question, but I'd greatly appreciate if someone could point me in the right direction. I'm writing a wave function collapse program in JavaScript embedded in HTML. It selects and places graphic tile images. I don't see anything happening until all tiles are placed (there are thousands). I'd like to be able to step through each tile's placement and see the updated page before the next tile is placed. I'm sure I'm missing something super simple here, but my searches online aren't finding anything. Thanks much.

 

[JosiahMaybe]

Can you post a link to relevant code?

 

[Michael E]

My code is irrelevant, but the example below should work. This function assumes I've already loaded all images into the body of the page. I need to know what I need to insert where shown to cause the page to update after each image src is changed by the loop.

Thanks!

function doIt() { for (j = 0; j < 1000; j++) { document.getElementbyId(hex[j]).src = "00-00-00-00-00-00.png"; //NEED SOMETHING HERE THAT ALLOWS ME TO SEE EACH IMG AFTER ITS SOURCE FILE IS CHANGED INSTEAD OF WAITING TILL THE FUNCTION COMPLETES TO SEE THEM ALL CHANGED AT ONCE alert("Pause so I can see the changed img before proceeding to the next step in the loop); } } IN

 

[rene7705]

add :

document.getElementById(hex[j]).addEventListener('load', function(event) { var prize=this, evt=event; debugger; });

 

[cbreemer]

It's an interesting question. Have you got it sorted out ?