jQuery未在函数中定义

Question

好吧，这是一个难题。 我有一个jQuery函数，用于通过.fadeIn / .fadeOut显示PHP生成的网站公告列表； 页面上加载的第一件事是CDN中的jQuery1.11.xx。 我正在运行Bootstrap，fullCalendar，SmartMenus等，并且jQuery肯定正在加载。

在setInterval（）内以更新公告。 这是粗糙的代码，不存在某些功能，但是在我看来，它应该是动画。

var announcementArray = [];
var announcementSource = "../announcements.php";
var totalAnnc;

$.getJSON(announcementSource, function(data) {
    announcementArray = data.concat();
    totalAnnc = announcementArray.length;
});

var count = 0;

var fadeAnnc = function() {

    $('#announcementArea').text(announcementArray[count].announceText);
    $('#announcementArea').fadeIn('slow',function() {
        $('#announcementArea').css('display','block');
    }).delay(2000).fadeOut('slow',function() {
        count = (count + 1) % totalAnnc;
    });
};

setInterval(function() {
    fadeAnnc();
}, 3000);   

相反，当我运行页面时，对于在setInterval（）中调用的所有jQuery函数，都会收到“未定义函数”错误。 如果我使用document.getElementById（'announcementArea'）。innerHTML =等调用，它可以工作，但是通过DOM操作进行淡入/淡出似乎比需要jQuery并在页面上其他任何地方都能工作时所需的工作更多。

我尝试了一些范围调整，并且在最近5个小时内一直在研究应该是简单代码的内容。 那么，我明显的错误在哪里？ ;）

Answer 1

不确定您遇到的是哪种范围的问题（看起来是未发布代码的结果，因为您的问题中的所有内容看起来都不错），但是如果您想要一种相当安全的方式传递jQuery对象，则可以始终将其传递为参数：

var fadeAnnc = function($) {

    $('#announcementArea').text(announcementArray[count].announceText);
    $('#announcementArea').fadeIn('slow',function() {
        $('#announcementArea').css('display','block');
        }).delay(2000).fadeOut('slow',function() {
        count = (count + 1) % totalAnnc;
    });
};

setInterval(function() {
    fadeAnnc($);
}, 3000);   

根据您更新的答案，这是另一种可能的解决方案：

(function($){

    var announcementArray = [];
    var announcementSource = "../announcements.php";
    var announcementSpace = "#announcementArea";


    $.getJSON(announcementSource, function(data) {
        announcementArray = data.concat();
        if (announcementArray.length === 0) {
            $('#anncRow').css('display','none');
        }
    });

    var count = 0;
    var masterCount = 0;
    var totalAnnc =  announcementArray.length;
    var timer;

    var fadeAnnc = function() {
        if (announcementArray.length > 0) {
            $(announcementSpace).html(announcementArray[count].announceText);
            $(announcementSpace).fadeIn(750, function() {
                $(announcementSpace).css('display','block');
            }).delay(4500).fadeOut(750, function() {
                $(announcementSpace).css('display','hidden');
            });
        }
        count += 1;
        if ((count % announcementArray.length) == 0) {count = 0}
    };

    setInterval(fadeAnnc, 6000);    

}(jQuery));

$被定义为一个函数参数，因此将覆盖函数体内的全局作用域$ ，以保护代码的定义。 实际上，这正是jQuery在创建扩展时所建议的 。

Answer 2

我以前的答案-刮that：

这个问题更有趣-在SmartMenu插件和LibraryThing图书显示小部件之间的某个地方，创建了jQuery冲突。 这就解释了为什么-根据加载顺序，不同的部分会损坏，但总是会损坏setInterval（），而该部分总是在SmartMenu和LibraryThing之后加载。

因此，我的解决方案有些混乱，是在脚本开头释放$并在结尾处回收它，以便jQuery在其他页面上可以访问它，如下所示：

jq = jQuery.noConflict();

var announcementArray = [];
var announcementSource = "../announcements.php";
var announcementSpace = "#announcementArea";


jq.getJSON(announcementSource, function(data) {
    announcementArray = data.concat();
    if (announcementArray.length === 0) {
        jq('#anncRow').css('display','none');
    }
});

var count = 0;
var masterCount = 0;
var totalAnnc =  announcementArray.length;
var timer;

var fadeAnnc = function() {
    if (announcementArray.length > 0) {
        jq(announcementSpace).html(announcementArray[count].announceText);
        jq(announcementSpace).fadeIn(750, function() {
            jq(announcementSpace).css('display','block');
        }).delay(4500).fadeOut(750, function() {
            jq(announcementSpace).css('display','hidden');
        });
    }
    count += 1;
    if ((count % announcementArray.length) == 0) {count = 0}
};

setInterval(fadeAnnc, 6000);    

$ = jQuery.noConflict();

Answer 3

使用闭包（无论如何都被认为是一种好习惯）：

(function($) {

    var your_function = function() {
        $(...);
    };

    setTimeout(function() {
        your_function();
    });

}(jQuery));

使用闭包会为您的代码创建一种“沙箱”，因此您不必担心会覆盖在父作用域中声明的任何变量（例如jQuery使用的美元符号$ ）。