Forum Moderators: open

Message Too Old, No Replies

setTimeout becomes very slow

         

yisraelharris

4:22 pm on Jan 24, 2004 (gmt 0)

10+ Year Member



I have written a short javascript program which draws an array of orbits, creating one large circle. It uses setTimeout heavily.

The program runs correctly, but becomes increasingly slower as it runs. I have no idea why. The url is

<Sorry, no URLs. See TOS [webmasterworld.com]>

My hat's off to anyone who can get this program running without the slowdown.

I have tried many, many things to fix this and none of them worked. It's a very short program, so if you think you have the solution, why not try it yourself before posting it here.

Note that all the code after the closing html tag is added on by geocities.
Note also that the same problem occurred when I ran it locally on my machine before I uploaded it to geocities.

[edited by: tedster at 5:25 pm (utc) on Jan. 24, 2004]

Purple Martin

2:21 am on Jan 25, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I wonder if it's the same kind of issue as the one discussed in this recent thread?
[webmasterworld.com...]

yisraelharris

3:02 am on Jan 25, 2004 (gmt 0)

10+ Year Member



More notes:

1. I ran the program on NS, and the slowdown is even worse.

2. I see that this forum doesn't allow posting of the URL, so the entire script is below -- only 26 lines.

3. Here's a clue: if I add this line:

mySpan.style.display = "none"

then the slowdown disappears completely. (A window.status line is added in this case to see that the program is indeed runnig.)

AND HERE'S THE CODE:

<html>
<body></body>
<script>
nBatches = 700
currentAngle = 0
function RevolvingGroup (batchNumber) {
for (i = 0; i < 10; i++) {
var mySpan = document.createElement("<SPAN>")
document.body.appendChild(mySpan);
mySpan.style.backgroundColor = "blue"
mySpan.style.position = "absolute"
mySpan.style.width = mySpan.style.height = 20.0
currentDistance = 20.0 * i
mySpan.style.left = currentDistance * Math.cos(currentAngle) + 340.0
mySpan.style.top = currentDistance * Math.sin(currentAngle) + 180.0
}
currentAngle = parseFloat(currentAngle) + 3.141592654 / parseFloat(nBatches/2)
}
function createBatches (batchNumber) {
newGroup = new RevolvingGroup(batchNumber++)
if (batchNumber < nBatches)
setTimeout("createBatches(" + batchNumber + ")", 1)
}
createBatches(0)
</script>
</html>

Purple Martin

11:27 pm on Jan 26, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I did a little experiment of my own:

I ran your script unchanged, and the circle started drawing fast but soon slowed down until it was really slow (just as you described).

Then I changed the setTimeout from 1 millisecond to 100 milliseconds. The circle started off a bit slower than before, as you'd expect, but it continued at the same pace with no slowing. I believe this is because my computer's CPU had time to finish calculating and drawing each line before starting the next.

When the timeout is set too low, the CPU is still busy working on the previous calculations when it starts on the next, so then it's trying to do two at the same time which slows it down a bit. As the number of simultaneous calculations increases it slows down more and more.

I think you'll find that the slow down comes into effect with different timeout settings on different computers, depending on their CPU speed. You've invented a new test for benchmarking!

yisraelharris

8:02 am on Jan 27, 2004 (gmt 0)

10+ Year Member



Thank you!