Question

我正在学习javascript，为此我正在创建一个带有fadein fadeout等功能的简单效果库。一切正常但它可以执行我在传递效果时执行的函数。

我收到错误

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);
    }
}

修改哦，我现在觉得很傻。问题出在我发布的代码上。我正在设置两个效果，一个在页面加载时，一个在它关闭时在页面加载的那个我没有传递函数我是jsut有这个

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

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

Answer 1

我在Chrome中测试时遇到两个问题：

在jlqAddEffect()变量初始化为数组之前调用effectElements函数，这会在您尝试effectElements.push(effect);时导致错误。通过将jlqAddEffect()调用移至代码末尾轻松修复。
你的动画永远不会真正完成，因为JavaScript的浮点运算（和/或处理opacity属性时奇怪的东西）会阻止不透明度一直下降到0 。它下降到0.009999999999999247然后“卡住”。您可以通过测试不透明度是否大于0.01而不是大于0来解决此问题。

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

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

1 个答案: