Re: slowing a script down

Hello Anthony,

Your answer was extremely helpful. As you can plainly see I'm a newbie &
your instructions helped me understand the 'implicit' aspects of Javascript
i.e, not necessary to use the string class etc.

I still have to get my head around how the setTimeout function works & why
it needs to be nested within the function that it calls. I'll have to
experiment :)

Anyway, thanks very much for helping me along the path.

Cheers

Ant

"Anthony Jones" wrote:



"Ant" <Ant@xxxxxxxxxxxxxxxxxxxxxxxxx> wrote in message
news:7F6CE2EF-E950-41EC-B1DA-9B55ADA995DD@xxxxxxxxxxxxxxxx
Hi,
I'm trying to slow a script down. I'm using a very crude nested loop to do
it. When I add an alert to check it for each step of the loop, it seems to
work fine, (well, you can see the panel incrementing in width & the value
of
the panel width increasing)
but when I take out the alert, there seems to be an initial delay, the
sudden increase of the panel width to the maximum size.

How can I do this properly. I tried using a SetTimeout but that didn't
seem
to have any affect at all (?)
As you can see I'm a newbie so I appreciate your time to answer this.
Below this is the code I'm trying to write...

Many thanks,
Ant


function divSlidePanel_onclick() {
var stringWidth = new String();
stringWidth = divSlidePanel.style.width;

I wish I had a quid for every time I see code like the above ;) why not:-

var stringWidth = divSlidePanel.style.width

??

var panelwidth = parseInt(stringWidth.indexOf("px",0));


panelwidth = the character position where the string px is first found?
Why???

while (panelwidth < 120)
{
// increment the panel
divSlidePanel.style.width = ++panelwidth;

// double loop to stall the next increment
for(var i = 0; i < 10; i++)
{
for(var j = 0; j < 1000; j++)
{
// do some useless thing
j=j;
}
//alert(i); to test the increment
}

}

}

Browsers don't repaint the UI whilst javascript code is in progress.

Using alerts pauses the Javascript (since they are modal) and is an
appropriate point to ensure the actual drawn UI matches the current state of
the DOM.

If you want to perform some animation then setTimeout is an appropriate tool
but you need to think about your loop in a new way.

function animatePanel()
{
var speed = 200; //Smaller is faster
var self = this
var panelWidth= parsetInt(this.style.width)
var hTimer = window.setTimeout(animate, speed);

function animate()
{
if (panelWidth < 120)
{
self.style.width = (panelWidth++).toString() + 'px'
hTimer = window.setTimeout(animate, speed);
}
}
}

The solution could alternatively use setInterval but I would be more
comfortable with setTimeout.

Note the code assumes the div in html looks like:-

<div style="width:5px" onclick="animatePanel.call(this)">
....
</div>

Note the div doesn't actually need an ID for this work and that the function
can be re-used to animate any panel. In fact you could take it a little
further with:-

function animatePanel()
{
var speed = parseInt(this.getAttribute("speed") || "200")
var finalWidth = parseInt(this.getAttribute("finalWidth") || "120")
var self = this
var panelWidth= parsetInt(this.style.width)
var hTimer = window.setTimeout(animate, speed);

function animate()
{
if (panelWidth < finalWidth )
{
self.style.width = (panelWidth++).toString() + 'px'
hTimer = window.setTimeout(animate, speed);
}
}
}

<div style="width:5px" finalWidth="150" speed="300"
onclick="animatePanel.call(this)">
....
</div>

Now you can override the default 120 width and 200ms timeout with
alternative values appropriate to the div.

--
Anthony Jones - MVP ASP/ASP.NET



.

Relevant Pages

  • Re: slowing a script down
    ... I have worked around this by incrementing the panel width with a larger ... var stringWidth = new String; ... panelwidth = the character position where the string px is first found? ... can be re-used to animate any panel. ...
    (microsoft.public.scripting.jscript)
  • Re: slowing a script down
    ... When I add an alert to check it for each step of the loop, ... var stringWidth = new String; ... panelwidth = the character position where the string px is first found? ... can be re-used to animate any panel. ...
    (microsoft.public.scripting.jscript)
  • Re: programmatically creating mouse clicks
    ... "David Novo" wrote in message ... // animate mouse cursor to a point ... var classname:arrayof char; ...
    (borland.public.delphi.language.objectpascal)