one second intervals in loop result

Question

I try to make a loop (with conditions), but I do not want to see the result instantly. I want to see the result shown with one second intervals for each row.

second 1 = row 1, second 2 = row 2 (and row 1 is still visible), second 3 = row 3 (row 1, and row 2 still there and so on..)

In the first place, the PHP script should do loop (30 rows as conditions require $i<=30) and after that, start displaying the result with one second intervals for each row. Otherwise mt_rand() make a real mess with the results.

The loop example:

  for ($i=1; $i<=30; $i++) {
   $roll = mt_rand(1,3);     
    if ($roll=="1") {echo "1 <br />\n";}
elseif ($roll=="2") {echo "2 <br />\n";}
  else {echo "3 <br />\n"; }

I try to found something really simple and functionally, no jQuery, no pointlessly long code, but simple short script. My JS skill is really low, so I want to ask you guys for help. Can you help me ?

You need to send all data to the client or use Ajax. In either case look at setTimeout or setInterval — mplungjan, Aug 28 '13 at 15:30
You can use `flush();` to forcefully send data, but this doesn't always work if you're using output buffering or gzip compression. — Halcyon, Aug 28 '13 at 15:31

score 0 · Answer 1 · answered Aug 28 '13 at 15:38

0

Are you looking for sleep() function? takes seconds to wait before executing next statement. Also changed your 1-2-3 logic, condition does not seem necessary.

for ($i=1; $i<=30; $i++) {
   $roll = mt_rand(1,3);
   sleep(1);
   echo $roll." <br />";
}

answered Aug 28 '13 at 15:38

Faisal Sayed

783
4
12

the loop is only example, so don't bother with logic.. sleep() make a long time delay before page is reload.. so no, it's not the function what I'm looking for.. I need every 1 second be displayed 1 row of total 30 rows.. – Tichomír Duchaplný Aug 28 '13 at 15:58
actually, in the end of the day, the sleep() was the function what I'm looking for, thx. – Tichomír Duchaplný Sep 05 '13 at 06:57

score 0 · Answer 2 · answered Aug 28 '13 at 15:40

0

You can pause your PHP for one second after each row and flush the output buffer each time it wakes up:

for ($i=1; $i<=30; $i++) {
    $roll = mt_rand(1,3);     
    if ($roll == "1")
        echo "1 <br />\n";
    else if ($roll == "2")
        echo "2 <br />\n";
    else
        echo "3 <br />\n";

    // Flush the output buffer
    ob_flush();
    // Sleep for one second
    sleep(1);
}

It is necessary to call ob_flush() because PHP buffers output, so simply sleeping will delay the page output, but it will still appear at once in the browser.

When you do this, please be aware that your script execution time may be longer than the maximum execution time allowed by PHP. You can set this limit in your code:

set_time_limit(90); // Maximum execution time is 90 seconds
set_time_limit(0);  // No execution time limit

or in your php.ini file:

max_execution_time = 90

answered Aug 28 '13 at 15:40

Menthos

330
2
5

nope, long time for reloading page.. I need every 1 second be displayed 1 row of total 30 rows.. – Tichomír Duchaplný Aug 28 '13 at 16:01
Calling ob_flush() will send each row to the browser even if the page is not finished loading, even if your page takes ages to load. – Menthos Aug 28 '13 at 16:03
yes, I tried to and take error -> Fatal error: Maximum execution time of 30 seconds exceeded, I don't want to wait for result and then see it immediately, I want see every 1 second another row of total 30 rows.. so, after 30 seconds, the 30 rows will be displayed. – Tichomír Duchaplný Aug 28 '13 at 16:08
this works for me fine and it's similarly to your advice -> http://stackoverflow.com/questions/15036232/php-loop-how-to-print-each-result-and-delay-it-for-a-second-before-echoing-anot – Tichomír Duchaplný Aug 28 '13 at 17:10

Manolo · Answer 3 · 2013-09-01T23:23:57.557

0

I'd use setTimeout() function. https://developer.mozilla.org/en/docs/Web/API/window.setTimeout

edited Sep 01 '13 at 23:23

answered Aug 28 '13 at 15:41

Manolo

24,020
20
85
130

always use authentic and up to date references. https://developer.mozilla.org/en/docs/Web/API/window.setTimeout – Faisal Sayed Aug 28 '13 at 15:43
I'll try to make every row in loop a ID and set display: none; then JS, something like that (but no luck): – Tichomír Duchaplný Aug 28 '13 at 16:03
leave quotes inside setTimeout() function. – Manolo Aug 28 '13 at 16:32
Try this: – Manolo Aug 29 '13 at 08:36
nothing happend.. I was trying your script with this PHP code -> 1\n";} elseif ($roll=="2") {echo " 2\n";} else {echo " 3\n";} } ?> – Tichomír Duchaplný Aug 30 '13 at 06:20
You forgot quotes. Copy the next: 1\n';} elseif ($roll=="2") {echo ' 2\n';} else {echo ' 3\n';} } ?> – Manolo Aug 30 '13 at 08:40
And $roll=="1", $roll=="2", should be $roll==1 and $roll==2 – Manolo Aug 30 '13 at 08:42
What is happening? Are your tags displayed with display:none? Any tag is been displayed with javascript? Does the browser debugger display any errors? Have you tried any console.log() to see some variables? without in any way detracting from the other valuable opinions, I think JS is the most simply way to do what you want to do. – Manolo Sep 01 '13 at 23:40
what happening ? instantly show all numbers, display is still none, simply JS is completelly ignore.. you can see for yourself, if you test this scripts on your own.. all scripts are here, I don't know, what is wrong, but it's in JS, that's for sure and JS is complicated for me, that's why I was asking for help.. – Tichomír Duchaplný Sep 04 '13 at 15:03
For your information (if you don't know yet), if you are using Firefox, you can install Firebug from the browser's tools. Then, if you type "console.log('variable = '+variable)" in your JS code (replacing variable with your variable), you can see the value of one or more variables in the firebug console. It's like the "echo" of PHP. – Manolo Sep 04 '13 at 16:11
I'm using chrome, and I'm testing JS in online error logs, but it doesn't matter.. Even if the JS error log found no errors, the script is completly ignore, and nothing happened. PHP make the work, but JS not. – Tichomír Duchaplný Sep 05 '13 at 06:55
It occurred to me that it could be due to: a) The url to the JS script is not right. Check it. b) JS is disabled in chrome (in configuration -> Advanced options -> content configuration -> enable javascript). – Manolo Sep 05 '13 at 11:48
Also try this: window.onload = function () { Javascript code goes here } – Manolo Sep 05 '13 at 11:52
JS is enabled and in place with PHP in the same file. it's only 1 file.. pls, try it yourself, here's the content of the file, maybe this is the way, how you can find, what is wrong -> http://efai.wz.cz/loop.rar – Tichomír Duchaplný Sep 05 '13 at 14:33

score 0 · Accepted Answer · answered Sep 06 '13 at 09:54

Well, the problem with setTimeOut() is that when the first oneNumber() function is executed, the loop has finished, and y=31. I think that there will be a way to fix a variable value when you call setTimeOut() function, but I've not found it. That's the only way I found out:

<!DOCTYPE html>
    <body>
    <?php
    for ($i=1; $i<=30; $i++) {
         $roll = mt_rand(1,3);
            if ($roll==1) {echo '<b id="b'.$i.'" style="display: none;"> 1</b>';}
        elseif ($roll==2) {echo '<b id="b'.$i.'" style="display: none;"> 2</b>';}
          else {echo '<b id="b'.$i.'" style="display: none;"> 3</b>';}
                             }
    ?>
    <script>
    window.onload = function () { 

    window.setTimeout(function() {
    document.getElementById('b1').style.display="block";
    },1000)
    window.setTimeout(function() {
    document.getElementById('b2').style.display="block";
    },2000)
    window.setTimeout(function() {
    document.getElementById('b3').style.display="block";
    },3000)
    window.setTimeout(function() {
    document.getElementById('b4').style.display="block";
    },4000)
    window.setTimeout(function() {
    document.getElementById('b5').style.display="block";
    },5000)
    window.setTimeout(function() {
    document.getElementById('b6').style.display="block";
    },6000)
    window.setTimeout(function() {
    document.getElementById('b7').style.display="block";
    },7000)
    window.setTimeout(function() {
    document.getElementById('b8').style.display="block";
    },8000)
    window.setTimeout(function() {
    document.getElementById('b9').style.display="block";
    },9000)
    window.setTimeout(function() {
    document.getElementById('b10').style.display="block";
    },10000)
    window.setTimeout(function() {
    document.getElementById('b11').style.display="block";
    },11000)
    window.setTimeout(function() {
    document.getElementById('b12').style.display="block";
    },12000)
    window.setTimeout(function() {
    document.getElementById('b13').style.display="block";
    },13000)
    window.setTimeout(function() {
    document.getElementById('b14').style.display="block";
    },14000)
    window.setTimeout(function() {
    document.getElementById('b15').style.display="block";
    },15000)
    window.setTimeout(function() {
    document.getElementById('b16').style.display="block";
    },16000)
    window.setTimeout(function() {
    document.getElementById('b17').style.display="block";
    },17000)
    window.setTimeout(function() {
    document.getElementById('b18').style.display="block";
    },18000)
    window.setTimeout(function() {
    document.getElementById('b19').style.display="block";
    },19000)
    window.setTimeout(function() {
    document.getElementById('b20').style.display="block";
    },20000)
    window.setTimeout(function() {
    document.getElementById('b21').style.display="block";
    },21000)
    window.setTimeout(function() {
    document.getElementById('b22').style.display="block";
    },22000)
    window.setTimeout(function() {
    document.getElementById('b23').style.display="block";
    },23000)
    window.setTimeout(function() {
    document.getElementById('b24').style.display="block";
    },24000)
    window.setTimeout(function() {
    document.getElementById('b25').style.display="block";
    },25000)
    window.setTimeout(function() {
    document.getElementById('b26').style.display="block";
    },26000)
    window.setTimeout(function() {
    document.getElementById('b27').style.display="block";
    },27000)
    window.setTimeout(function() {
    document.getElementById('b28').style.display="block";
    },28000)
    window.setTimeout(function() {
    document.getElementById('b29').style.display="block";
    },29000)
    window.setTimeout(function() {
    document.getElementById('b30').style.display="block";
    },30000)
    }   

    </script>
    </body>
    </html>

wow, this really works, it's a little complicated, but working.. I play with that, maybe I find something simpler. THX. — Tichomír Duchaplný, Sep 06 '13 at 11:25

one second intervals in loop result

4 Answers4