javascript - jQuery 未在函数内定义

Question

好的，这是一个谜题。我有一个 jQuery 函数，可以通过 .fadeIn/.fadeOut 显示 PHP 生成的网站公告列表；页面上加载的第一个内容是来自 CDN 的 jQuery 1.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 recommends when creating an extension .