...

View Full Version : call a function after another has ended



mapleleaf
05-22-2009, 04:25 AM
I have some code that needs to run only when the previous function has finished.
How is that done?
1st function:

function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);

}

Second bit of code to run when the above is finished:

c.style.height = '0px';
Thanks

Old Pedant
05-22-2009, 05:00 AM
(1) Put the code in at the end of the function:


function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
c.style.height = '0px';
}

That changes the c.style.height at the end of the ddCollapse function, without waiting for the ddSlide() call.

(2) Put the code in at the end of the function:


function ddCollapse(c){
c.timer = setInterval(
function()
{
ddSlide(c,-1);
c.style.height = '0px';
}, DDTIMER
);

Now the height is set to 0 each time that anonymous function is invoked.

I'm a bit curious what you mean by "when the previous function has finished". Since you are using setInterval, that anonymous function that in turn calls ddSlide( ) is going to get called *forever*, every DDTIMER milliseconds, so in some sense it will never be "finished."

Did you mean to use setInterval( ) instead of setTimeout( )???

mapleleaf
05-22-2009, 05:38 AM
I think it is easier to give all the javascript that is involved as I got it from elsewhere and am quite new to Js.

var DDSPEED = 15;
var DDTIMER = 20;

// main function to handle the mouse events //
function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}

// collapse the menu //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1);},DDTIMER);

}

// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}

if i can somehow get the c.style.height = '0px'; done at the end of the slideup that would be great as for some reason the slide up leaves a trace behind.
Thanks

Old Pedant
05-22-2009, 05:45 AM
AHA! Okay...

The problem is that ddSlide is called every 20 milliseconds until the slide is complete, then *apparently* it cancels its own setInterval.

So you will almost surely need to do this by modifying ddSlide, which you don't show us.

You need to add in your code at the same time that the interval is cancelled.

mapleleaf
05-22-2009, 06:03 AM
ddslide is the last function there.
I am sure you are right that it needs to be altered but I am not sure how.
Tx

_Aerospace_Eng_
05-22-2009, 07:15 AM
Here

if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
c.style.height = '0px';
}

Old Pedant
05-22-2009, 07:44 AM
A certain idiot who shall remain nameless didn't realize there was more code there because he missed seeing the scrollbar. DOH!

Aerospace has it ALMOST right. That's what I was looking for and what I expected to do: change the height to zero as the interval timer is removed.

BUT...

But he is changing the height to zero no matter WHICH WAY the slider was moving.

If I read you correctly, you only want to do it when the slider is finished moving up.

So I think it needs to be like this:


if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
if ( d < 0 ) c.style.height = '0px';
}


For consistency, I'd probably rewrite the if condition there, too:


if( (currh < 2 && d < 0 ) || (currh > (c.maxh - 2) && d > 0) ) {
clearInterval(c.timer);
if ( d < 0 ) c.style.height = '0px';
}

But that's just me.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum