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使用的美元符號$ ）。