javascript - JavaScript 関数の直接呼び出しが認識されないのはなぜですか?

Question

swapImage2()このコードを実行すると、関数が内部から呼び出されたときに次のエラーが発生する理由がわかりませんswapImage()。

Uncaught ReferenceError: swapImage2 is not defined

この問題に関連するすべての JavaScript/jQuery コードを次に示します (このコードをすべて読む必要はない可能性が高いですが、「完全な」コードを投稿するように警告されています)。

jQuery(function ($) {
//Slideshow functionality
    var paths = new Array();
    var timer = new Array();
    var pathsString = "";
    var i = 0;
    var panel = $("img#slideShowImage");
    var fTimer;
    var tTimer;
    var t2Timer;
    var fadingOut = false;
    var slideShowOn = false;
    var showTimer;
    var requestSlideShow = $.ajax({
        url: "/AJAX Pages/Compute_Slide_Show.cshtml",
        async: false,
        type: "GET",
        success: function (response) {
            paths = response.split("/*\\");
        },
        error: function (jqXHR, textStatus, error) {
            paths[0] = "Okmulgee_Clock_2";
        }
    });

    if (paths.length > 0) {
        console.log("*" + paths[0] + "*");
        panel.attr("src", "/Images/SlideShowPics/" + paths[0])
        if (paths.length > 1) {
            swapImage();
        }
    }
    else {
        panel.attr("src", "/Images/City_Images/Okmulgee_Clock_2.jpg");
    }

    function runSlideShow() {  //Calls the swapImage function to begin or resume the slide show
        if (slideShowOn == false) {
            slideShowOn = true;
            if (fadingOut == false) {
                clearTimeouts();
            }
            showTimer = setTimeout("swapImage();", 1552);
        }
    };

    function stopSlideShow() {  //Pauses the slide show
        clearTimeout(showTimer);
        if (fadingOut == true) {
            fTimer = setTimeout("clearTimeouts()", 1551);
        }
        else {
            clearTimeout(tTimer);
            clearTimeouts();
        }
        slideShowOn = false;
    };

    function swapImage() {  //Fades out the slideshow image
        tTimer = setTimeout("fadingOut=true", 4549);
        timer[0] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.9'", 4550);
        timer[1] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:90)'", 4550);  //For IE 8 & Earlier
        timer[2] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.8'", 4600);
        timer[3] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:80)'", 4600);  //For IE 8 & Earlier
        timer[4] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.7'", 4650);
        timer[5] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:70)'", 4650);  //For IE 8 & Earlier
        timer[6] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.6'", 4700);
        timer[7] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:60)'", 4700);  //For IE 8 & Earlier
        timer[8] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.5'", 4750);
        timer[9] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:50)'", 4750);  //For IE 8 & Earlier
        timer[10] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.4'", 4800);
        timer[11] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:40)'", 4800);  //For IE 8 & Earlier
        timer[12] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.3'", 4850);
        timer[13] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:30)'", 4850);  //For IE 8 & Earlier
        timer[14] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.2'", 4900);
        timer[15] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:20)'", 4900);  //For IE 8 & Earlier
        timer[16] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.1'", 4950);
        timer[17] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:10)'", 4950);  //For IE 8 & Earlier
        timer[18] = setTimeout("document.getElementById('slideShowImage').style.opacity='0'", 5000);
        timer[19] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:0)'", 5000);  //For IE 8 & Earlier
        timer[20] = setTimeout("swapImage2()", 5050);
    }

    function swapImage2() {  //Changes and fades in the slideshow image
        panel.attr("src", "/Images/SlideShowPics/" + paths[i]);
        if (i < paths.length - 1) {
            i++;
        }
        else {
            i = 0;
        }
        timer[21] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.1'", 550);
        timer[22] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:10)'", 550);  //For IE 8 & Earlier
        timer[23] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.2'", 600);
        timer[24] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:20)'", 600);  //For IE 8 & Earlier
        timer[25] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.3'", 650);
        timer[26] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:30)'", 650);  //For IE 8 & Earlier
        timer[27] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.4'", 700);
        timer[28] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:40)'", 700);  //For IE 8 & Earlier
        timer[29] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.5'", 750);
        timer[30] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:50)'", 750);  //For IE 8 & Earlier
        timer[31] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.6'", 800);
        timer[32] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:60)'", 800);  //For IE 8 & Earlier
        timer[33] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.7'", 850);
        timer[34] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:70)'", 850);  //For IE 8 & Earlier
        timer[35] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.8'", 900);
        timer[36] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:80)'", 900);  //For IE 8 & Earlier
        timer[37] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.9'", 950);
        timer[38] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:90)'", 950);  //For IE 8 & Earlier
        timer[39] = setTimeout("document.getElementById('slideShowImage').style.opacity='1'", 1000);
        timer[40] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:100)'", 1000);  //For IE 8 & Earlier
        t2Timer = setTimeout("fadingOut=false", 1050);
        timer[41] = setTimeout("swapImage()", 1050);
    }

    function clearTimeouts() {  //Clears all slide show timers
        for (key in timer) {
            clearTimeout(timer[key]);
        }
    }
});

また、イメージ要素をマウスオーバーまたはマウスアウトすると、それぞれUncaught ReferenceError: runSlideShow is not defined取得します。Uncaught ReferenceError: stopSlideShow is not defined

最後に、2 つの明確な違いを除いて、以前は「そのまま」使用していたので、この関数が完全に機能することを知っています。1):SQL を使用してデータベースにクエリを実行した後、サーバーからファイル名の値を取得する AJAX 関数から「パス」配列の値を取得しています (以前は JSON を使用して実行していました)。サーバーとの通信が完了した後に「パス」配列の値をテストしたため、値は期待どおり2):であり、すべてのコードを標準のjQueryjQuery(function ($) {...});ラッパーでラップしたためです。この結果として問題が存在する可能性があります。

これはおそらく、jQuery環境で関数を正しく整理していないか$、引数として渡していないという単純な答えですが、理解できないようです。

score 8 · Accepted Answer

これswapImage2は、に与えるコールバックのスコープでのみ定義されているためです$(document).ready。グローバルコンテキストからは見えません。

変化する

    timer[20] = setTimeout("swapImage2()", 5050);

に

    timer[20] = setTimeout(swapImage2, 5050);

そのため、グローバルコンテキストで文字列を評価するように要求する代わりに、setTimeout渡した関数を実行するように要求します。

より一般的には、関数に文字列を渡さないでくださいsetTimeout。これは、あなたも交換する必要があることを意味します

timer[0] = setTimeout("document.getElementById('slideShowImage').style.opacity='0.9'", 4550);
timer[1] = setTimeout("document.getElementById('slideShowImage').style.filter='alpha(opacity:90)'", 4550);  //For IE 8 & Earlier

と

var style = document.getElementById('slideShowImage').style;
timer[0] = setTimeout(function(){style.opacity='0.9'}, 4550);
timer[1] = setTimeout(function(){style.filter='alpha(opacity:90)'}, 4550);  //For IE 8 & Earlier

MDN の setTimeout のドキュメントに注意してください。関数の代わりにコードを渡すことは推奨されないことが具体的に書かれています。

javascript - JavaScript 関数の直接呼び出しが認識されないのはなぜですか?

1 に答える 1

Related

Reference