Run second function only after first function is complete

This function need little more work

$('#linkTabFoods').click( function(ev){
        If(('#tab1').css("display== none)){
 
 
 
rollUp("#tab2");
        rollDown("#tab1");
 
Set tab2 disply to none here 
set tab1 disply to block
         }
 If(('#tab2').css("display== none)){
 
Set tab1 disply to none here 
set tab2 disply to block
 
(rollUp("#tab1");
        rollDown("#tab2");
 
         }
 
        
        return false;
});
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

Basically you need to set something like this

when you click on tha tab 1 or tab 2 function will chek

if tab 1 is displaying than roll it up and roll down the tab 2

if tab 2 is displying than roll it up and roll down the tab 1

it sounds like that the most efficient way you could do this is either to modify your rollUp() function to have it call rollDown() itself after it completes. other than that, you can probably use rollUp()'s return value (if it has one).

(code snippet)

only problem is, if rollUp() fails and never returns true, then you're in for some hefty waiting. :p

function proxy(e)
{
  // this assumes that rollUp() returns true when completed
  var flag = false;
  flag = rollUp('#tab1');
  //
  while (!flag) { /* waste my time */ }
  rollDown('#tab2');
}

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:

I'd use a similar approach to what NahThenLad suggested. Using a value under 100 for the second argument should make the function run right after rollUp returns.

> I might be getting confused but i though this was called Callback

You've got an event listener function there. A "callback" is a function passed to another function to be called once the function has finished running. I suppose it's a similar concept, but there is a difference.

> only problem is, if rollUp() fails and never returns true, then you're in for some hefty waiting.

The while loop will only ever be reached after the rollUp function returns.

$('#linkTabFoods').click( function(ev){
        rollUp("#tab1");
        setTimeout('rollDown("#tab2");',10);
        
        return false;
});

                                              

1:
2:
3:
4:
5:
6:

@kravimir ~  i meant, if it returns false :p and if it doesn't return at all, then it's either a long wait or the script fails to complete successfully anyway.

---

and what I think alex wants done is a smooth transition between the rollUp and the rollDown. like *whoosh* tab goes up, then *whoosh* tab goes down. a setTimeout may do the trick, but it'll be really awkward-looking. :(

> i meant, if it returns false :p and if it doesn't return at all, then it's either a long wait or
> the script fails to complete successfully anyway.

Yes. My point is that I don't see a point to what you were suggesting.


> a setTimeout may do the trick, but it'll be really awkward-looking. :(

Well, yeah, if you use too long of a delay.

well, it seems awkward to me as well, truth be told. but alex mentioned that the two functions (rollUp and rollDown) ran at the same time... meaning that while rollUp() was still executing, rollDown was already called as well. meaning rollDown was running prior to rollUp returning.

now don't ask me why that happens :p prolly something within the rollUp / rollDown functions?

but (just humor me here :p), if it *does* cascade to rollDown even before the rollUp was returning, then the whole point of the exercise is to delay the rollDown call with just enough time to coincide with rollUp finishing.

you're right about it being awkward with a delay that's too long. but it'd also be awkward with a delay that's too short. there can be no delay exactly correct than a delay exactly as long as it takes the rollUp function to finish. :(

and a setTimeout call, with a constant delay, will always be second to a true solution that's dynamic. :( not only is the exact execution time not known, but it would also differ across browsers and systems.

i'm not saying mine is exactly right though. i mean, for what we know, rollUp may have a setTimeout of its own, and returns before everything that its supposed to do is done, and my solution would be invalid. but i'm just playing along with what alex stated his situation seemed like.

^ thinking back on that, it does sound like rollUp may have a time-delay function of its own in its content. meaning that there might not be an exact way to determine when it finishes, but to modify the rollUp function completely. :(

no way should it return prematurely except when it's explicitly set something to work over a period of time. :(

have a flag (boolean variable)

set it true only after rollup is complete

check the flag inside rolldown if its false return else proceed

> it does sound like rollUp may have a time-delay function of its own in its content.

Yes, that seems likely.

Hi Alex

You can pass functions as arguments in JavaScript (anonymous functions) so why not just build in a callback? This how jQuery handles these kind of situations

Change the rollUp/rollDown functions eg

function rollUp(id,callback,callbackId){
        //Do your original code, even if there is a timer
        //When your code is done run this
        If( typeof (callback) == "function"){//Double check we have a function
                   callback(callbackid);
        }
}
 
//Call the function like this
rollup("#id1",rollDown,"#id2");

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10: