Re: slowing a script down



"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
    ... 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
    ... 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: Illegal LOOP usage?
    ... | reason would they even mention the WITH clause there? ... On the next iteration the loop variable would be bound with WITH to ... the constructs collect and collecting collect ... The argument var is set to the ...
    (comp.lang.lisp)
  • Dynamically generated functions not behaving as expected...
    ... that existed in the last iteration of the loop to all previous ... var ary = new Array; ... affect -- creating dymamic functions with varied data while iteration ...
    (comp.lang.javascript)
  • wait for event
    ... carry out a loop. ... var XYZDlg = function{ ... // This fires when the load event is initiated ...
    (comp.lang.javascript)