1

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

編集: ああ、私は今ばかげていると感じています.問題は私が投稿したコードにはありませんでした. 私は2つの効果を入れています.1つはページがロードされたとき、もう1つはページがロードされたときに閉じるときです。

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

そして、私は関数要素を渡していなかったので[3]は関数ではありませんでした...

4

1 に答える 1

1

Chrome でテストしたところ、次の 2 つの問題がありました。

  • 変数が配列に初期化されるjlqAddEffect()前に関数を呼び出すと、を実行しようとするとエラーが発生します。呼び出しをコードの最後に移動することで簡単に修正できます。effectElementseffectElements.push(effect);jlqAddEffect()

  • JavaScript の浮動小数点演算 (および/またはopacityプロパティの処理における奇妙なこと) により、不透明度が0. それは降りてから0.009999999999999247「立ち往生」します。これは、不透明度が よりも大きい0.01ではなくよりも大きいかどうかをテストすることで修正できます0。

デモ: http://jsfiddle.net/nZpSs/1/

于 2013-06-16T12:32:46.283 に答える