setInterval in this code doesn't work properly
<script language="javascript">
x = y = 0;
function mvtb(p, g){
i = 0;
tmp = setInterval(function (){
if(i < 100 && i >= 0){
document.getElementById("plan").scrollTop = 200*(y+((y-g)*(i/100)));
document.getElementById("plan").scrollLeft = 660*(x+((x-p)*(i/100)));
i++;
}
else if(i == 100){
clearInterval(tmp);
}
}, 10);
x = p; y = g;
}
</script>
CSS
<style>
#plan {overflow: hidden; height: 200px; width: 660px; background: #444;}
.plan {width: 1980px;}
.plan table {height: 200px; width: 660px;}
</style>
HTML
<body style="background: black; color: white;">
<center>
<div id="plan">
<table class="plan">
<tr id="g0">
<td class="p0"><table bgcolor="gray"><tr><td>0 0</td></tr></table></td>
<td class="p1"><table bgcolor="blue"><tr><td>1 0</td></tr></table></td>
<td class="p2"><table bgcolor="yellow"><tr><td>2 0</td></tr></table></td>
</tr>
<tr id="g1">
<td class="p0"><table bgcolor="green"><tr><td>0 1</td></tr></table></td>
<td class="p1"><table bgcolor="orange"><tr><td>1 1</td></tr></table></td>
<td class="p2"><table bgcolor="red"><tr><td>2 1</td></tr></table></td>
</tr>
<tr id="g2">
<td class="p0"><table bgcolor="brown"><tr><td>0 2</td></tr></table></td>
<td class="p1"><table bgcolor="white"><tr><td style="color: black">1 2</td></tr></table></td>
<td class="p2"><table bgcolor="crimson"><tr><td>2 2</td></tr></table></td>
</tr>
</table>
</div>
<br /><br /><br />Move Table<br />
<button onClick="mvtb(0, 0);">0 0</button> <button onClick="mvtb(1, 0);">1 0</button> <button onClick="mvtb(2, 0);">2 0</button><br />
<button onClick="mvtb(0, 1);">0 1</button> <button onClick="mvtb(1, 1);">1 1</button> <button onClick="mvtb(2, 1);">2 1</button><br />
<button onClick="mvtb(0, 2);">0 2</button> <button onClick="mvtb(1, 2);">1 2</button> <button onClick="mvtb(2, 2);">2 2</button><br />
</center>
</body>
setInterval in this code doesn't work properly
<script language="javascript">
x = y = 0;
function mvtb(p, g){
i = 0;
tmp = setInterval(function (){
if(i < 100 && i >= 0){
document.getElementById("plan").scrollTop = 200*(y+((y-g)*(i/100)));
document.getElementById("plan").scrollLeft = 660*(x+((x-p)*(i/100)));
i++;
}
else if(i == 100){
clearInterval(tmp);
}
}, 10);
x = p; y = g;
}
</script>
CSS
<style>
#plan {overflow: hidden; height: 200px; width: 660px; background: #444;}
.plan {width: 1980px;}
.plan table {height: 200px; width: 660px;}
</style>
HTML
<body style="background: black; color: white;">
<center>
<div id="plan">
<table class="plan">
<tr id="g0">
<td class="p0"><table bgcolor="gray"><tr><td>0 0</td></tr></table></td>
<td class="p1"><table bgcolor="blue"><tr><td>1 0</td></tr></table></td>
<td class="p2"><table bgcolor="yellow"><tr><td>2 0</td></tr></table></td>
</tr>
<tr id="g1">
<td class="p0"><table bgcolor="green"><tr><td>0 1</td></tr></table></td>
<td class="p1"><table bgcolor="orange"><tr><td>1 1</td></tr></table></td>
<td class="p2"><table bgcolor="red"><tr><td>2 1</td></tr></table></td>
</tr>
<tr id="g2">
<td class="p0"><table bgcolor="brown"><tr><td>0 2</td></tr></table></td>
<td class="p1"><table bgcolor="white"><tr><td style="color: black">1 2</td></tr></table></td>
<td class="p2"><table bgcolor="crimson"><tr><td>2 2</td></tr></table></td>
</tr>
</table>
</div>
<br /><br /><br />Move Table<br />
<button onClick="mvtb(0, 0);">0 0</button> <button onClick="mvtb(1, 0);">1 0</button> <button onClick="mvtb(2, 0);">2 0</button><br />
<button onClick="mvtb(0, 1);">0 1</button> <button onClick="mvtb(1, 1);">1 1</button> <button onClick="mvtb(2, 1);">2 1</button><br />
<button onClick="mvtb(0, 2);">0 2</button> <button onClick="mvtb(1, 2);">1 2</button> <button onClick="mvtb(2, 2);">2 2</button><br />
</center>
</body>
-
Fixed @epascarello ;-) OP, you have a chunk of HTML that is out of place,
</td> <td class="p2"><table bgcolor="crimson"><tr><td>2 2</td></tr></table></td> </tr> </table>– Jason Gennaro Commented Aug 31, 2011 at 12:32 - @Jason the HTML is okay, it is just hard to parse all of the nested tables. – Dennis Commented Aug 31, 2011 at 12:36
-
setInetvaldoesn't work anymore – R. 久蔵 Commented Aug 31, 2011 at 12:54
2 Answers
Reset to default 5Try this instead. Only update g and p after the animation is finished and swap the subtraction when calculating the new scrollTop/scrollLeft. You also need to make sure the loop runs 100 times, not 99. JSFiddle
x = y = 0;
function mvtb(p, g) {
var i = 1;
var tmp = setInterval(function() {
if (i <= 100 ) {
document.getElementById("plan").scrollTop = 200 * (y + ((g - y) * (i / 100)));
document.getElementById("plan").scrollLeft = 660 * (x + ((p - x) * (i / 100)));
i++;
}
else {
clearInterval(tmp);
x = p;
y = g;
}
}, 10);
}
Use the var statement to get closure to work right.
Check for >=.
(i is a really bad variable name and you probably use it elsewhere and reset it in the global context.)
There is another problem with your x, y, p and g. But I'm not sure what those values are used for... I think you might need another two variables but I'm not sure.
<script language="javascript">
var x = y = 0;
function mvtb(p, g){
var i = 0;
tmp = setInterval(function (){
if(i < 100 && i >= 0){
document.getElementById("plan").scrollTop = 200*(y+((y-g)*(i/100)));
document.getElementById("plan").scrollLeft = 660*(x+((x-p)*(i/100)));
i++;
}
else if(i >= 100){
clearInterval(tmp);
}
}, 10);
x = p;
y = g;
}
</script>