jQuery Не определено внутри функции

Question

Хорошо, вот головоломка. У меня есть функция jQuery для отображения списка объявлений, созданных в PHP, для веб-сайта через .fadeIn/.fadeOut; самое первое, что загружено на странице, - это jQuery 1.11.xx из CDN. Я запускаю Bootstrap, fullCalendar, SmartMenus и т. Д., И jQuery наиболее определенно загружается.

За исключением установленногоInterval(), чтобы обновить объявление. Это грубый код, некоторая функциональность отсутствует, но, на мой взгляд, он должен делать анимацию.

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); 

Вместо этого, когда я запускаю страницу, я получаю «функция не определена» ошибки для любой функции JQuery, которая называется в setInterval(). Если я вызываю с помощью document.getElementById ('announcementArea'). InnerHTML = и т. Д., Он работает, но выполнение fade in/out с помощью 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.

Answer 2

Мой предыдущий ответ - поцарапать, что:

Вопрос был более интересным - где-то между плагином 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)); 

Использование затворов создает своего рода «песочницу» для вашего кода, так что вам не придется беспокоиться о перезаписи переменных, объявленных в родительской области (например, доллар -sign $ используется jQuery).