Возможно, мне нужно решить простую проблему, но я не знаю, каков правильный подход к этому.
У меня есть панель div.notification поверх моего сайта, которая по умолчанию скрыта.Бар получает дополнительный класс либо success, либо warning, который при необходимости устанавливает его на display:block;.
Итак, есть два случая.Либо выходное сообщение выводится непосредственно на полосу .notification при загрузке страницы (и он получает класс success или warning прямо с ним), либо полоса .notifcation скользит вниз сверху и подается сjson data.
В любом случае, панель уведомлений всегда должна быть видна в течение 10 секунд, а затем скользить вверх.
Поэтому я написал две функции, которые обрабатывают эту панель.
var timing = 10000;
function notificationOutput(type, message) {
var note = $('.notification');
note.hide();
note.find('.message').html(message);
note.stop(true,true).slideDown().delay(timing).slideUp();
}
function notificationSlideUp(slideUp) {
var note = $('.notification');
if ( slideUp ) note.delay(timing).slideUp();
else note.stop(true,true).slideUp();
}
Таким образом, функция notificationOutput() запускается из различных других функций, которые возвращают данные json и отображают их в поле.
И функция notificationSlideUp() сейчас вызывается при каждой загрузке страницы, потому что в моем заголовке у меня есть это ...
<script type="text/javascript">
$(document).ready(function(){
notificationSlideUp(true);
});
</script>
И для этого есть причина!Вспомните случай, когда .notification прямо установлен как видимый при загрузке страницы… например, когда пользователь заходит на мою платформу, панель .notification сразу становится видимой и говорит «Добро пожаловать, пользователь успешно вошел в систему».
Я вызываю функцию notifictaionSlideUp() в своем заголовке, чтобы удостовериться, что видимая в данный момент панель .notification снова выполнит slideUp () через 10 секунд.
И здесь возникает проблема ... Каким-то образом это приводит к тому, что вся синхронизация уведомлений и скольжение вверх и вниз "запутываются".Таким образом, должна произойти некоторая постановка в очередь функций слайдов и / или функции delay (), потому что без note.stop(true,true) в функции notificationOutput() уведомление не будет сразу вызывать slideDown (), если оно будет запущено в течение первых 10 секунд послезагрузка страницы.Это происходит потому, что функция notificationSlideUp() уже запустила slideUp () и delay () объекта.
И то же самое происходит с задержкой.Если .notification выдается в течение первых 10 секунд, время задержки не подходит, потому что счетчик задержки уже запущен при загрузке страницы.
Есть идеи, как решить эту проблему, чтобы она всегда работала?
Обновление:
var notificationTimer;
function notificationOutput(type, message) {
var note = $('.notification');
note.hide();
note.find('.message').html(message);
note.stop(true,true).slideDown();
clearTimeout(notificationTimer);
notificationTimer = setTimeout(function() {
note.stop(true,true).slideUp();
}, 10000);
}
function notificationSlideUp(slideUp) {
var note = $('.notification');
if ( slideUp ) {
clearTimeout(notificationTimer);
notificationTimer = setTimeout(function() {
note.stop(true,true).slideUp();
}, 10000);
} else {
note.stop(true,true).slideUp();
}
}