jQuery:阻止动画和超时排队?

时间:2012-02-10 07:54:00

标签: javascript jquery timeout delay timing

我可能有一个简单的问题要解决,但我不知道这是什么方法。

我的网站顶部有一个div.notification栏,默认情况下是隐藏的。如果需要,该栏会获得额外的successwarning课程,并将其设置为display:block;

所以,有两种情况。输出消息在页面加载时直接呈现给.notification栏(并且它与successwarning一起使用)或者.notifcation栏是从顶部向下滑动并用json数据提供。

任何方式,通知栏应始终显示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栏会在10秒后再次滑动()。

这里出现问题...... 不知何故,这导致整个通知时间和上下滑动被“混淆”。因此,必须对slide-functions和/或delay()函数进行一些排队,因为如果note.stop(true,true)函数中没有notificationOutput(),则通知不会立即slideDown(),如果它在页面加载后的前10秒。那是因为notificationSlideUp()函数已经触发了对象的slideUp()和delay()。

延迟也是如此。如果在前10秒内放出.notification,则延迟时间不正确,因为延迟计数器已在页面加载时启动。

知道如何解决这个问题以便它始终有效吗?

更新

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

2 个答案:

答案 0 :(得分:1)

不幸的是,jQuery的delay()函数没有像setTimeout() clearTimeout()那样提供任何消除延迟的方法。我建议您使用已命名的delay()替换setTimeout() s,并为需要立即取消/触发排队动画的情况将条件写入clearTimeout()

答案 1 :(得分:1)

http://api.jquery.com/delay/

  

.delay()方法最适合在排队的jQuery之间延迟   效果。 因为它是有限的 - 例如,它没有提供一种方法   取消延迟-.delay()不能替代JavaScript的原生代码   setTimeout函数,可能更适合某些用途   例。

但你可以使用以下'提示' - 用一些不会改变任何东西的动画替换延迟。例如.animate({opacity:1},timing)