Question

Here is a source viewer for fadeIn() but it does not link out to custom() for some reason.

Also, as a second question, how does one conceptualize all this code…there are so many function calls that I can’t even guess as to how much code actually runs when you call .fadeIn() or .fadeOut().

For example:

fadeIn() calls animate() which calls speed() which calls extend()…

As a third question: is this object oriented programming ?

Thanks.

Answer 1

It doesn’t use setTimeout(), it uses setInterval(), which is in custom(), which is called at the bottom of the animate() method.

Here’s a good tutorial: http://www.schillmania.com/content/projects/javascript-animation-1/

As explained in the tutorial, setTimeout() schedules an event to occur a certain amount of time after the setTimeout() function is called. The problem it’s going to take time for the scheduled function to run, and thus the next timeout is going to be scheduled after the first timeout’s delay AND the time it took to execute the code.

If you want:

100ms : function x called 
200ms : function x called 
300ms : function x called 
400ms : function x called

and you do:

function x(){
    setTimeout( x , 100);
}
setTimeout( x , 100);

What’s going to happen is:

100ms : function x called
first calls execution time + 200ms : function x called
second calls execution time + first calls execution time + 300ms : function x called
third calls execution time + second calls execution time + first calls execution time + 400ms : function x called

So you do:

function x(){

}
setInterval( x , 100);