Loop delay

[Sir Osis of Liver]

 

Trying to delay each interation of a while loop, so that output displays on same line and user can see it change.  Here's the code -

Code Select Expand



echo '<div id="array">';

while ($count < 100) {

echo '<script>document.getElementById("array").innerHTML = "";</script>';

echo '<br />Random shuffle - ', $count ,'<br />';

shuffle($marbles);

foreach ($marbles as $value) {

if ($value == 'red')
$color = '#ff0000';
if ($value == 'green')
$color = '#00ff00';
if ($value == 'blue')
$color = '#0000ff';
if ($value == 'purple')
$color = '#ff00ff';

$str = $str . $value;

echo '<span style="color: ', $color ,';  font-size: 60px;">&bull;</span>';
}

$count++;
}

echo '</div>';



Tried php sleep(), that just delays execution of the entire script.  Tried various permutations of js setTimeout(), can't get it to work.  What's most annoying is I've done this before, but don't remember how.

[Suki]

Do it on the client side.

On your echo add a class or some inline css with some display: none; and a unique ID, you already have a counter so you can use that since you already know your counter starts at 0 and you can also know how many items you're displaying.

Something like this:

Code Select Expand


echo '<div style="color: ', $color ,';  font-size: 60px;  display: none;" id="unique_'. $count .'">&bull;</span>';


When the DOM is ready, start showing each div, ad another count var var on your JS:

Code Select Expand



var count = 0;

function show()
{
count++;

document.getElementById('unique_' + count).style.display = 'block';
}

window.setInterval(function ()
{
show();
}, 10 * 1000);


Dunno, something like that.

[Sir Osis of Liver]

Will give it a try tonight.  I used setTimeout and setInterval several different ways, and it was either ignored or stalled the script.

You can see what I'm trying to do here.  The script runs 100 iterations shuffling the array, and I want the user to see the counter increment and the shuffled array change as the iterations are run.