Last active
December 14, 2015 13:49
-
-
Save vaz/5096517 to your computer and use it in GitHub Desktop.
Some example and semi-pseudo tutorial code showing using closures for chaining animations.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// the self-calling function is a | |
// Javascript "module" pattern for | |
// not leaking stuff into global scope: | |
(function(){ | |
// simple closure example | |
function loglater(message){ | |
return function logger(){ | |
console.log(message); // references outer function's argument | |
} | |
} | |
var logit = loglater('meow'); // returns a function | |
// later, regardless of further invocations of loglater | |
// with other arguments, this instance still has access | |
// to the outer function's environment as it was when it | |
// was defined | |
loglater("arf"); | |
loglater("moo"); | |
loglater("yay"); | |
logit(); // logs 'meow' | |
})(); | |
(function(){ | |
// using closures to chain animations | |
// animation functions return true if done | |
function moveX(element, x){ | |
// move element 1px toward x | |
return (/* element's x != x */) | |
} | |
function moveY(element, y){ | |
// move element 1px toward y | |
return (/* element's y != y */) | |
} | |
function animate(element, animation, arg, callback){ | |
function step(){ | |
if(animation(element, arg)){ | |
if(callback) | |
callback(); | |
} else { | |
setTimeout(10, step); | |
} | |
} | |
step(); | |
} | |
var element = /* ... */; | |
animate(element, moveX, 500, function(){ | |
animate(element, moveY, 500); | |
}); | |
})(); | |
(function(){ | |
// another way of chaining by chaining method calls | |
// animation functions return true if done | |
function moveX(element, x){ | |
// move element 1px toward x | |
return (/* element's x != x */) | |
} | |
function moveY(element, y){ | |
// move element 1px toward y | |
return (/* element's y != y */) | |
} | |
function animate(element, animation, arg){ | |
var callback = null; | |
function step(){ | |
if(animation(element, arg)){ | |
if(callback != null) | |
callback(); | |
} else { | |
setTimeout(10, step); | |
} | |
} | |
step(); | |
return { | |
then: function(){ | |
// set the outer function's callback variable | |
callback = function(){ animate.apply(this, arguments); } | |
} | |
} | |
} | |
var element = /* ... */; | |
animate(element, moveX, 500).then(element, moveY, 500); | |
})(); | |
(function(){ | |
// not using closures: | |
function moveX(element, x, callback){ | |
// ... | |
if(/* done */){ | |
if(callback) | |
callback(); | |
} else { | |
setTimeout(100, moveX, element, x, callback); | |
} | |
} | |
function moveY(..){ ... } | |
moveX(element, x, function(){ | |
moveY(element, x); | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment