咆哮式通知时间问题

Posted 2023-02-24

【中文标题】咆哮式通知时间问题

【英文标题】：Growl type notification timing issue

【发布时间】：2011-07-25 17:41:20

【问题描述】：

所以我正在使用 Mootools 和 JS_Growl 插件，该插件运行良好，但在页面提交有用之前，我无法让通知停留足够长的时间。

例如here…

是否有某种对 Growl 插件的回调，以便当通知“完成”时，我可以进行重定向？

或者，当我在成功提交后返回页面然后发出通知时，也许有某种方式可以感知？您可以看到我正在将商品 ID 提交到购物车页面，然后该页面将我发回。

任何建议将不胜感激。我的 javascript 非常基础，因此可视化代码示例非常理想。

提前致谢！

【参考方案1】：

你读过源代码吗？这是一个非常老的插件，匆忙拼凑和修补，所以它可以与 MooTools 1.2 一起使用。他们甚至不使用Class。因此，没有Events mixin。也没有回调。

/*
JS_Growl Mootools based notifier
Version 0.2
Developed and maintained by Carlos Ouro
http://techtrouts.com
*/
JS_Growl=
    //user callable properties / funcionalities
    notify:function(str)
        if(!this._v.initiated) this._a.init();
        var el=new Element('div',
            'class':(Browser.Engine.name=='trident' && Browser.Engine.version<5)?'JS_Growl_notify_IE6':'JS_Growl_notify',
            'html':str
        );
        el.inject(this._o.container);
        var fx= new Fx.Morph(el, 
            'duration': 'short'
        );
        fx.set(
            'opacity':0,
            'display':'block'
        );
        fx.start(
            'opacity':[0,1]
        );
        setTimeout(function()
            fx.start(
                'opacity':[1,0]
            ).chain(function()
                this.options.durtion='long';
                this.start(
                    'height':0,
                    'padding-top':0,
                    'padding-bottom':0,
                    'margin-top':0,
                    'margin-bottom':0
                ).chain(function()
                    el.destroy();
                );
            );
        , 2500);
    ,

    //internal structure "à la fallforward ( http://fallforwardgame.com )"
    _v:
        initiated:false
    ,
    _a:
        init:function()
            JS_Growl._o.container=new Element('div', 'id':'JS_Growl_container');
            JS_Growl._o.container.inject(document.body);
            JS_Growl._v.initiated=true;
            if(Browser.Engine.name=='trident' && Browser.Engine.version<5)                         
                //position "fixed"
                JS_Growl._o.container.setStyle('position':'absolute');
                JS_Growl._a.ie6_pos();
                window['addEvent']('scroll', JS_Growl._a.ie6_pos);
                window['addEvent']('resize', JS_Growl._a.ie6_pos);
            
        ,
        ie6_pos:function()
            JS_Growl._o.container.setStyles('top':Window.getScrollTop()+'px', 'left':Window.getWidth()+'px');
        
    ,
    _o:
        "container":null
    

考虑到这有多小，重构它以完成您需要的工作应该只需几分钟 - 10 到 15 分钟左右。

但是，您可以更轻松地解决此问题 - 在单击添加到购物篮时停止提交事件。等待一段时间以看到通知，例如 2.5 秒。重新提交或更改location.href

这是一个类似且更灵活的插件列表：

http://mootools.net/forge/p/growler http://mootools.net/forge/p/notimoo

玩得开心。

【讨论】：

Dimitar，非常感谢，这正是我需要的线索。我需要暂时暂停提交事件才能看到通知。然而，我痛苦地不知道如何做到这一点。如果你能拼凑一个简单的例子，那就太好了！在此期间，我会进行一些搜索。另外，是的，我知道这是一个旧插件，但仍然认为它可用。让我正确暂停提交事件，然后我会看看你的咆哮建议，看看其中一个是否可能更有效地使用。再次感谢！