Let's say I have a series of animations that I want to execute in sequence. If I do it like this, am I creating a huge call stack that eats up more memory than necessary?
function ch1():void {
var someVar:uint;
function doThis();
...
...
ch2();
}
function ch2():void {
var someOtherVar:String;
function doThat();
...
...
ch3();
}
function ch3():void {
var evenMoreVar:Number;
function doMore();
...
...
ch4();
}
Would it be better to call the next function by doing something like this to avoid a huge call stack?
function ch1():void {
addEventListener("ch1_end",ch2);
var someVar:uint;
function doThis();
...
...
dispatchEvent(new Event("ch1_end"));
}
Using events is a better way to deal with sequences like yours, but in some simple cases you can just delay each call a little so you can be sure they will not run in the same time and cause freezing your swf , try to use something simple like setTimeout and see the results, if it is not good then you should try useing the events as you have described in your question .
var nextCallDelay:Number = 20; // in milliseconds, change it to fit your needs
function ch1():void {
var someVar:uint;
function doThis();
...
...
setTimeout(ch2, nextCallDelay);
}
function ch2():void {
var someOtherVar:String;
function doThat();
...
...
setTimeout(ch3, nextCallDelay);
}
function ch3():void {
var evenMoreVar:Number;
function doMore();
...
...
setTimeout(ch4, nextCallDelay);
}
How about you return something instead so you don't have that huge stack of interconnected functions ?
function ch1():void {
return true
}
function ch2():void {
return true
}
function myAnim(){
var ani1 = ch1();
var ani2 = ch2();
}
Related
I have next function
var hideAll = function() {
// code
return ///...
};
And I am using this function like callback in another function.
When I am using it like
function (params, hideAll) {}
all working well, but when I am using
function (params, hideAll() ) {}
all not working well!
So my question is, what is difference between hideAll and hideAll() function executions?
hideAll - this is a reference to the function
hideAll() - this is execution of the function, its result
function (params, hideAll) {} is a correct function definition,
whereas function (params, hideAll() ) {} is not - you are unable to call another function in function definition.
However you could still write the following valid code:
var hideAll = function() {
// code
return ///...
};
var functionWithCallback = function(callback){
callback();
}
var closureReferringHideAll = function(){
hideAll();
}
// The following two lines will do exactly the same in current context,
// i.e. execute hideAll.
functionWithCallback(hideAll);
closureReferringHideAll();
hideAll() is not a function, it is result of execution function.
function hideAll(){
return 0;
}
hideAll() - number 0
hideAll - function
In Javascript and in many other languages functions are "first class objects" and this means that you can call/execute a function but you can also store the function in a variable or in an array, or you can pass a function to another function.
Note that I'm not talking about passing the value resulting from calling a function... but the function itself. Consider:
function test10(f) {
for (var i=0; i<10; i++)
alert(f(i));
}
function square(x) { return x*x*; }
function cube(x) { return x*x*x; }
test10(square);
test10(cube);
The last two lines are passing a function (square and cube) as a parameter to function test10.
The () syntax tells Javascript that you want to make the call, and can be used not only with function names, but with any expression like variables or array elements... for example:
var f_arr = [square, cube];
for (var i=0; i<2; i++)
alert(f_arr[i](i+42)); // Will call square(42) and cube(43)
Actually in Javascript the code
function square(x) {
return x * x;
}
is not identical but similar to
square = function(x) {
return x * x;
};
so defining a function is indeed close to assigning a variable
Let's step back for a moment and assume you would call a method foo
first like this:
foo(params, hideAll() ) {}
This uses the return value of hideAll as the value
whereas
foo(params, hideAll) {}
Uses the hideAll function itself as the value
However, what you actually tried to do is to declare a function like this:
function (params, hideAll() ) {}
That makes no sense. You can't declare a function with anything different from a parameter in the parameter list.
So while both forms are legal for function invocation (still with a total different meaning) the latter isn't legal for function declaration
I am having trouble passing a kata. I believe I am on the right track, but do not fully understand how to retrieve the desired results.
The Instructions
Write a method that takes in a function and the arguments to the function and returns another function which when invoked, returns the result of the original function invoked with the supplied arguments.
Example Given
Given a function add
function add (a, b) {
return a + b;
}
One could make it lazy as:
var lazy_value = make_lazy(add, 2, 3);
The expression does not get evaluated at the moment, but only when you invoke lazy_value as:
lazy_value() => 5
Here is my half a day endeavor conclusion
var make_lazy = function () {
var innerFunction = null;
var array = [];
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] == 'function') {
innerFunction = arguments[i];
} else {
array.push(arguments[i]);
}
}
innerFunction.apply(innerFunction, array);
innerFunction();
};
I'm using arguments and apply() and think I am close? However I am getting TypeError: lazy_sum is not a function at Object.exports.runInThisContext within test results. Any help, especially understanding what is going on, is appreciated. Thanks
...
return function() {
return innerFunction.apply(this, array);
};
};
Thanks again all. Problem solved.
I have three functions that I have listed in an array. Now I need a random function of the three to be called when pressing a button. However, when I press the button it calls all three functions and I'm not quite sure where I've gone wrong. It looks like this right now:
function Arm1function1(){
this.parent.parent.parent.Armfront1.visible = true;
this.parent.parent.parent.Armback1.visible = false;
}
function Arm1function2(){
this.parent.parent.parent.Armfront1.visible = false;
this.parent.parent.parent.Armback1.visible = true;
}
function Arm1function3(){
this.parent.parent.parent.Armfront1.visible = false;
this.parent.parent.parent.Armback1.visible = false;
}
function getRandomElementOf(Armbuttonarray1:Array):Object {
var Armbuttonarray1:Array = [Arm1function1(), Arm1function2(), Arm1function3()];
var idx:int=Math.floor(Math.random() * Armbuttonarray1.length);
return Armbuttonarray1[idx];
}
Randombutton1part1.addEventListener(MouseEvent.CLICK, Randombutton1part1Click);
function Randombutton1part1Click(e:MouseEvent):void
{
getRandomElementOf(null);
}
Any clue of where I've gone wrong?
Your issue is this line:
var Armbuttonarray1:Array = [Arm1function1(), Arm1function2(), Arm1function3()];
When populating that array, you are actually populating it with the results of the functions.
Should be:
var Armbuttonarray1:Array = [Arm1function1, Arm1function2, Arm1function3];
Notice the lack of parenthesis ().
You want to actually execute the function on the click handler, so you'll need to tweak that a bit too:
getRandomElementOf(null)();
or
getRandomElementOf(null).call();
As an aside, your getRandomElementOf function should probably look more like this:
function getRandomElementOf(array:Array):Object {
return array[Math.floor(Math.random() * array.length)];
}
Then do:
getRandomElementOf([Arm1function1, Arm1function2, Arm1function3])();
hi i'm trying to use requestAnimationFrame for my game and I actually use this code below, but as you can see ".bind()" create every loop a new function that slow down my game... I'm looking for a "efficient" solution for the best perfomance, thank you in advance :D
function myClass() {
this.loop = function() {
window.requestAnimationFrame(this.loop.bind(this));
/* here myGameLoop */
}
this.loop();
}
above code works but is slow.. instead this "standard" code give me "Type error":
window.requestAnimationFrame(this);
I have also found e tried this Q&A: requestAnimationFrame attached to App object not Window works just ONE time then give the same "Type error" :(
try if you don't believe me: http://jsfiddle.net/ygree/1 :'(
Without knowing the whole story of your object (what else is in there); you could simplify life by just doing this:
function myClass() {
var iHavAccessToThis = 1;
function loop() {
iHavAccessToThis++;
/* here myGameLoop */
requestAnimationFrame(loop);
}
loop();
//if you need a method to start externally use this instead of the above line
this.start = function() { loop() }
//...
return this;
}
Now you don't need to bind anything and you access local scope which is fast.
And then call:
var class1 = new myClass();
class1.start();
I'm no code genius, but a fan of action script.
Can you help me on this:
I have a function that depending on the object selected, will call event listeners to a set of 'sub-items' that are already on stage (I want to reuse this subitems with changed parameters upon click, instead of creating several instances and several code).
So for each selected 'case' I have to pass diferent variables to those 'sub-items', like this:
function fooMenu(event:MouseEvent):void {
switch (event.currentTarget.name)
{
case "btUa1" :
trace(event.currentTarget.name);
// a bunch of code goes here
//(just cleaned to easy the view)
/*
HELP HERE <--
here is a way to pass the variables to those subitems
*/
break;
}
}
function fooSub(event:MouseEvent):void
{
trace(event.target.data);
trace(event.currentTarget.name);
// HELP PLEASE <-> How can I access the variables that I need here ?
}
btUa1.addEventListener(MouseEvent.CLICK, fooMenu);
btUa2.addEventListener(MouseEvent.CLICK, fooMenu);
btTextos.addEventListener(MouseEvent.CLICK, fooSub);
btLegislacao.addEventListener(MouseEvent.CLICK, fooSub);
Anyone to help me please?
Thank very much in advance. :)
(I'm not sure I got your question right, and I haven't developed in AS3 for a while.)
If you want to simply create function with parameters which will be called upon a click (or other event) you can simply use this:
btUa1.addEventListener(MouseEvent.CLICK, function() {
fooMenu(parameters);
});
btUa2.addEventListener(MouseEvent.CLICK, function() {
fooMenu(other_parameters)
}):
public function fooMenu(...rest):void {
for(var i:uint = 0; i < rest.length; i++)
{
// creating elements
}
}
If you want to call event listeners assigned to something else you can use DispatchEvent
btnTextos.dispatchEvent(new MouseEvent(MouseEvent.CLICK))
Remember, you can't use btTextos.addEventListener(MouseEvent.CLICK, carregaConteudo("jocasta")); because the 2nd parameter you pass while adding Eventlistener will be considered as function itself - there are two proper ways to use addEventListener:
1:
function doSomething(event:MouseEvent):void
{
// function code
}
element.addEventListener(MouseEvent.CLICK, doSomething); //notice no brackets
2:
element.addEventListener(MouseEvent.CLICK, function() { // function code });
So:
function fooSub(event:MouseEvent, bla:String):void
{
trace(event.currentTarget.name+" - "+bla);
// bla would be a clip name.
}
codebtTextos.addEventListener(MouseEvent.CLICK, function(e:MouseEvent) { fooSub(e, "jocasta") } );
Or try something like this if you want content to be dynamically generated:
btUa1.addEventListener(MouseEvent.CLICK, function() {
createMenu(1);
});
btUa2.addEventListener(MouseEvent.CLICK, function() {
createMenu(2);
});
function createMenu(id):void
{
// Switching submenu elements
switch (id)
{
case 1:
createSubmenu([myFunc1, myFunc2, myFunc3]); // dynamically creating submenus in case you need more of them than u already have
break;
case 2:
createSubmenu([myFunc4, myFunc5, myFunc6, myFunc7]);
break;
default:
[ and so on ..]
}
}
function createSubmenu(...rest):void {
for (var i:uint = 0; i < rest.length; i++)
{
var mc:SubItem = new SubItem(); // Subitem should be an MovieClip in library exported for ActionScript
mc.addEventListener(MouseEvent.CLICK, rest[i] as function)
mc.x = i * 100;
mc.y = 0;
this.addChild(mc);
}
}
Your question is rather vague; what "variables" do you want to "pass"? And what do you mean by "passing the variable to a sub item"? Usually "passing" means invoking a function.
If you can be more specific on what exactly your trying to do that would be helpful. In the meantime, here are three things that may get at what you want:
You can get any member of any object using bracket notation.
var mc:MovieClip = someMovieClip;
var xVal:Number = mc.x; // The obvious way
xVal = mc["x"]; // This works too
var propName:String = "x";
xVal = mc[propName] ; // So does this.
You can refer to functions using variables
function echo(message:String):void {
trace(message);
}
echo("Hello"); // The normal way
var f:Function = echo;
f("Hello"); // This also works
You can call a function with all the arguments in an array using function.apply
// Extending the above example...
var fArgs:Array = ["Hello"];
f.apply(fArgs); // This does the same thing
Between these three things (and the rest parameter noted by another poster) you can write some very flexible code. Dynamic code comes at a performance cost for sure, but as long as the frequency of calls is a few hundred times per second or less you'll never notice the difference.