/    Sign up×
Community /Pin to ProfileBookmark

pause a for loop

hello people, i am new here and have some experience with javascrip. anyways i was wondering if there is a way to make some sort of [I]sleep()[/I] function to create a pause in a for loop.
Here is my html code with the javascript, (without such function)

[code=html]
<html>
<head>
<style>
.cell{width:5;height:5;background-color:buttonface}
.green{width:5;height:5;background-color:00ff00}
.mainTable{background-color:black;}
</style>
</head>
<body>

<script>
var x=20
var y=20
writeThis=”<table class=’mainTable’ cellpadding=0 cellspacing=0>”
for(cnt1=0;cnt1<x;cnt1++)
{
writeThis+=”n<tr>”;
for(cnt2=0;cnt2<y;cnt2++)
{
writeThis+=”n<td id=”cor”+cnt1+”x”+cnt2+”” class=”cell” onmouseover=”this.className=’green'”></td>”;
}
writeThis+=”n</tr>”;
}
writeThis+=”n</table>”;
document.write(writeThis);
//document.write(“<textarea cols=’100′ rows=’20’>”+writeThis+”</textarea>”);//remove comment here to see what the for outputs

//up to this point the script works perfectly.

</script>

<script>
for(cnt11=0;cnt11<x;cnt11++)
{
for(cnt22=0;cnt22<y;cnt22++)
{
var nextCell=document.getElementById(“cor”+cnt11+”x”+cnt22);
nextCell.className=’green’;
//i need to add some sort of sleep(1000) to make a pause within the for loop
}
}
</script>
</body>
</html>
[/code]

I am trying to make a effect where i could make every cell in the table to change color one by one every second or so.
thanks in advance.

to post a comment
JavaScript

9 Comments(s)

Copy linkTweet thisAlerts:
@alameluvrSep 19.2005 — you could make use of

setTimeout("forloopfunction()",1000);

statement.

This would execute the forloopfunction every 1000 msecs
Copy linkTweet thisAlerts:
@saulssauthorSep 19.2005 — thanks for your reply, but can you please make it more specific?
Copy linkTweet thisAlerts:
@MjhLkwdSep 19.2005 — Saul:

Exactly what is it that you are trying to do? Do you have a fixed table, with a fixed number of rows and columns, and the data in each cell is also fixed? If so, do you need each cell to simply change background color, one by one, every second?
Copy linkTweet thisAlerts:
@saulssauthorSep 20.2005 — yes, the first part of the javascript generates a table with a given x and y number of cells. each <td> that has been generated has a unique id (like cor56x78, cor0x0, cor99x99), now i want to make another for loop that would call each cell in like every second and change the css class for it.

so far the script does what it is supposed to. but the problem is that i cant set some sort of pause in the execution of the second set of for loops (the one that changes the classname).
[CODE]
for(cnt11=0;cnt11<x;cnt11++)
{
for(cnt22=0;cnt22<y;cnt22++)
{
var nextCell=document.getElementById("cor"+cnt11+"x"+cnt22);
nextCell.className='green';
//i need to add some sort of sleep(1000) to make a pause within the for loop
}
}
[/CODE]

thank you
Copy linkTweet thisAlerts:
@MjhLkwdSep 20.2005 — saulss:

You'll have to adapt this to your code.

[CODE]<HTML>
<Head>
<Style type="text/css">

.highLight {background-color:red}
.normal {background-color:white}

</Style>

<Script type="text/javascript">

var r = 0;
var c = 0;
var prevCell = "";
var maxRows = 0;
var maxCols = 0;

function clear(){

document.getElementById(prevCell).className = 'normal';
r = 0;
c = 0;
prevCell = "";
}

function highLightCell(){

if (prevCell != ""){document.getElementById(prevCell).className = 'normal'}
var idStr = 'cor'+r+'x'+c;
document.getElementById(idStr).className = 'highLight';
prevCell = idStr;
if (c < (maxCols+1)){c++}
if (c == maxCols && r < (maxRows+1)){r++; c = 0}
if (r < maxRows){startStep()}
if (r == maxRows){setTimeout("clear()",1000)}
}

function startStep(){

setTimeout("highLightCell()",1000);
}

function setUp(){

maxRows = document.getElementById('dataTable').rows.length;
maxCols = document.getElementById('dataTable').rows[0].cells.length;
startStep();
}

</Script>
</Head>
<Body>
<Table id='dataTable' width='300' height='300' border='1'>

<TR>
<TD id='cor0x0'> </TD>
<TD id='cor0x1'> </TD>
<TD id='cor0x2'> </TD>
</TR>

<TR>
<TD id='cor1x0'> </TD>
<TD id='cor1x1'> </TD>
<TD id='cor1x2'> </TD>
</TR>

<TR>
<TD id='cor2x0'> </TD>
<TD id='cor2x1'> </TD>
<TD id='cor2x2'> </TD>
</TR>

</Table>
<br>
<input type='button' value="Start" onclick="setUp()">
</Body>
</HTML>[/CODE]
Copy linkTweet thisAlerts:
@saulssauthorSep 20.2005 — oh wow. thanks man, this really helps
Copy linkTweet thisAlerts:
@MjhLkwdSep 20.2005 — You're welcome.
Copy linkTweet thisAlerts:
@timescaleMar 30.2006 — can i jump in here with another question
Copy linkTweet thisAlerts:
@ali_gglMar 04.2008 — You can pause any of JavaScript loop by just placing a logic for it.

like below
<i>
</i>i=1;
function startPausing(){
if(i&lt;=5){
window.setTimeout("startPausing()",4000);
alert("Loop iteration "+i+ " out of 5");
i++;
}
}

For further details i refer this url for full details.

Pausing JavaScript For, For In, Do and Do While Loops Example.
×

Success!

Help @saulss spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...