jQuery: время ожидания / задержки с функцией уведомления?

Question

Я написал следующую простую функцию, которая принимает два параметра, в основном из другой функции, возвращаемой с сервера с помощью json.

var timing = 10000;

function notificationOutput(type, message) {
    console.log('output now!');
    var note = $('.notification');
    note.css('display', 'none');
    if ( type == "success" ) { note.removeClass('warning').addClass('success'); }
    if ( type == "warning" ) { note.removeClass('success').addClass('warning'); }
    note.find('.message').html(message);
    note.slideDown( function() {
        note.delay(timing).slideUp();
    });
}

Все, что он делает, это просто сдвигает панель вверху моей страницы, выводя сообщение (об успехе или предупреждении). Переменная timing предназначена для того, чтобы панель уведомлений оставалась в течение 10 секунд. Поэтому, когда функция сработает, я хочу, чтобы бар был slideDown(), удерживайте эту позицию в течение 10 секунд и затем slideUp() снова.

Однако прямо сейчас, когда функция запускается, происходит странное время ожидания, пока не появится панель уведомлений. Это означает, что когда функция запускается, вывод console.log(), который у меня там находится сейчас, немедленно регистрируется в моей JS-консоли, но функция slideDown () появляется на несколько секунд дольше! Почему это так?

Я хочу, чтобы slideDown() происходил немедленно (одновременно с тем, как output now регистрируется в консоли). Почему происходит задержка?

Спасибо за вашу помощь!

Answer 1

Вы не передаете значение от duration до slideDown.Попробуйте:

note.slideDown(1000, function() {
  note.delay(timing).slideUp();
});

Answer 2

Попробуйте это

note.slideDown().delay(timing).slideUp();

Answer 3

Я думаю, что проблема может быть в функции easing, используемой slideDown, которая по умолчанию swing (которая является логарифмической)попробуйте использовать линейное и, возможно, попробуйте использовать более быстрое время скольжения

note.slideDown(400, 'linear').delay(timing).slideUp(400, 'linear');

Answer 4

Ничего очевидного там нет. Я бы попытался урезать код до тех пор, пока он не соскользнет, ​​как ожидалось. Удалите обратный вызов, удалите html-набор, удалите установщики классов успеха / предупреждения, выберите элемент note перед выводом на консоль, замените слайд немедленным показом и т. Д.

---

Также попробуйте сначала позвонить на заметку .stop(true,true): note.stop(true,true).slideDown();. Это в том случае, если он занят другой анимацией, а слайд находится в очереди.