Javascript:将函数作为变量传递并执行

Javascript : pass function as variable and execute it

本文关键字：执行 变量 函数 Javascript      更新时间：2023-09-26

我正在学习javascript，为此我正在创建一个简单的效果库，具有渐隐淡出等功能。一切工作正常，但它不执行我传递的函数，当效果完成时执行。

我得到错误

element[3] is not a function
我代码:

//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);
    }
}
编辑:

哦，我现在觉得自己很傻。问题不在我发布的代码上。我放了两个效果，一个当页面加载，一个当它关闭在页面加载时，我没有传递一个函数我只是有这个

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

因为我没有传递一个函数元素[3]不是一个函数…

在Chrome中测试时出现了两个问题:

  • 在effectElements变量初始化为数组之前调用jlqAddEffect()函数，这会导致在尝试effectElements.push(effect);时出现错误。通过将jlqAddEffect()调用移动到代码的末尾，可以轻松修复。

  • 你的动画从来没有真正完成，因为JavaScript的浮点运算(和/或在处理opacity属性时的一些奇怪的东西)阻止了不透明度一直到0。它下降到0.009999999999999247，然后被"卡住"。你可以通过测试不透明度是否大于0.01而不是大于0来解决这个问题。

演示:http://jsfiddle.net/nZpSs/1/

相关文章：