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。

最后，我知道这个功能是完美的，因为我之前“按原样”使用它，除了两个明显的区别。 1):我从AJAX函数中获取'paths'数组的值，该函数在使用SQL查询数据库之后从服务器获取文件名值（我曾经通过JSON执行此操作）请注意，这不是问题，因为我在完成与服务器通信之后测试了'paths'数组的值，并且值与我期望的完全相同 AND {{1我已将所有代码包装在标准2): jQuery包装器中。由于此，问题很可能存在。

这很可能是我在jQuery环境中没有正确组织我的函数的简单答案，或者可能没有传递jQuery(function ($) {...});作为参数，但我似乎无法弄明白。

Answer 1

那是因为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

注意the documentation of setTimeout on the MDN：特别指出不建议传递代码而不是函数。

为什么不直接调用我的JavaScript函数被识别？

1 个答案: