0

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 函数获取“路径”数组的值，该函数从服务器获取文件名值，在它使用 SQL 查询数据库之后（我曾经通过 JSON 进行）请注意，这不是问题，因为我在完成与服务器的通信后测试了“路径”数组的值，并且这些值与我期望的完全一样，并且我2):已经将所有代码包装在标准jQuery(function ($) {...});jQuery 包装器中问题很可能因此而存在。

这很可能是我没有在 jQuery 环境中正确组织我的函数的简单答案，或者可能没有$作为参数传递，但我似乎无法弄清楚。

4

1 回答 1

8

那是因为swapImage2只在你给的回调范围内定义$(document).ready，它在全局上下文中是不可见的。

改变

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

到

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

因此，您无需要求setTimeout在全局上下文中评估字符串，而是要求它执行您传递的函数。

更一般地说，不要将字符串传递给setTimeoutbut 函数。这意味着您还应该更换

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 文档：专门写了不建议传递代码而不是函数。

于 2013-05-08T20:10:33.933 回答