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 控制台中，但 slipDown() 需要多花几秒钟的时间才能出现！这是为什么？

我希望 slideDown() 立即发生（与 output now 记录在控制台的同时）。为什么会出现延迟？

感谢您的帮助！

Answer 1

那里没有什么明显的东西。我会尝试修剪代码，直到它按预期滑落。删除回调，删除 html-set，删除 success/warning 类设置器，在输出到控制台之前选择 note-element，用立即显示替换幻灯片等。

---

还可以尝试调用 .stop(true ,true) 首先在注释上：note.stop(true,true).slideDown();。这是为了防止它正忙于处理其他动画并且向下滑动正在排队。

Answer 2

试试这个

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

Answer 3

我认为问题可能出在slideDown使用的easing函数中，默认情况下是swing（对数）。尝试使用线性，也许尝试使用更快的下滑时间

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

Answer 4

您没有将 duration 值传递给 slideDown。尝试：

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