Javascript : pass function as variable and execute it

Question

I am learning javascript and for that i am creating a simple effects library with fadein fadeout etc functionalities .Everything works ok but it dosent execute the function that i am passing in to execute when the effect is done.

I get the error

element[3] is not a function

my code:

//add the effect 
jlqAddEffect(document.getElementById("mainBoard"),"fadeout",10,function(){
    alert("done"); //->>>I dont get this executed when the effect is done
});

//EFFECTS
var effectElements=new Array();
function jlqAddEffect(element,type,speed,func)
{
    var effect=[element,type,setInterval(function(){jlqUpdateEffect(effect);},speed),func];//->>Here i pass the function in the 3d element of the array
    effectElements.push(effect);
    jlqInitEffect(effect);
}

function jlqInitEffect(element)
{
    if(element[1]=="fadein")element[0].style.opacity=0;
    if(element[1]=="fadeout")element[0].style.opacity=1;
}
function jlqUpdateEffect(element)
{
    var done=false;
    if(element[1]=="fadein"){
        if(parseFloat(element[0].style.opacity)<1){
            element[0].style.opacity=parseFloat(element[0].style.opacity)+0.01;
        }
        else done=true;
    }
    if(element[1]=="fadeout"){
        if(parseFloat(element[0].style.opacity)>0){
            element[0].style.opacity=parseFloat(element[0].style.opacity)-0.01;
        }
        else done=true;
    }
    if(done){
        alert("effect done");//->>I get this executed when the effect is done
        element[3](); // ->>here it should be calling the function but it gives me the error
        clearInterval(element[2]);
        effectElements.splice(effectElements.indexOf(element),1);
    }
}

EDIT: Ohh i feel silly now .The problem wasn't on the code i posted . I am puting two effect ,one when the page loads and one when it closes in the one when the page loads i wasn't passing an function i was jsut had this

jlqAddEffect(document.getElementById("mainBoard"),"fadein",10);

And since i wasn't passing a function elements[3] wasn't a function...

you pass jlqUpdateEffect(effect) to setIntervall. But there is no effect yet. — bitWorking
– bitWorking, Commented Jun 16, 2013 at 12:27
@redreggae Doesn't matter, there will be when the function runs. — JJJ
– JJJ, Commented Jun 16, 2013 at 12:29
Yuck, arrays instead of object :-( In any case, you're paying in the results of calling setInterval. Oh, no your not-misread... See? Arrays :-( — Dave Newton
– Dave Newton, Commented Jun 16, 2013 at 12:33

nnnnnn · Accepted Answer · 2013-06-16 12:47:30Z

1

There were two problems when I tested it in Chrome:

You call the jlqAddEffect() function before the effectElements variable has been initialised to an array, which leads to errors when you try to effectElements.push(effect);. Easily fixed by moving the jlqAddEffect() call to the end of your code.
Your animation never actually completes, because JavaScript's floating point arithmetic (and/or something weird in the handling of the opacity property) prevents the opacity ever getting all the way down to 0. It gets down to 0.009999999999999247 and then gets "stuck". You can fix this by testing whether the opacity is greater than 0.01 instead of greater than 0.

Demo: http://jsfiddle.net/nZpSs/1/

edited Jun 16, 2013 at 12:47

answered Jun 16, 2013 at 12:32

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript : pass function as variable and execute it

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related