0

我创建了一个相对较小的动态横幅旋转脚本，底部带有图标，以使特定横幅成为焦点。在横幅上触发 mouseenter 会暂停显示，但有时当我从横幅上移出鼠标时，某些横幅的延迟会缩短。我什至可以理解它是否只发生过一次，但是每次横幅在轮换中返回时，延迟都会设置为较短的时间，并且通常缩短发生在横幅列表中的另一个位置，如好。有时，这可以通过一组尚未确定的行动来纠正。我开始怀疑我的逻辑在某个地方捕获了中间的循环，因此进程分支出来，运行两个循环，这似乎加快了 showNextBanner 函数的调用。不知道如何解决这个问题。一世'

我包括了我认为是下面代码的相关部分。

        var firstRun = true;
        var play = true;
        var current = 0;

        var banners = $$( '.banner' ); 
        banners.invoke( 'hide' );
        var images = $$( '.image' );
        var icons = $$( '.icon' );
        //dynamically clones an initial icon to match the number of banners
        initIcons();

        banners.invoke( 'observe', 'mouseenter', function( field ) {
            play = false;
        });

        banners.invoke( 'observe', 'mouseleave', function( field ) {
            if( !play ) {
                play = true;
                showNextBanner().delay(3);
            }
        });

        icons.invoke( 'observe', 'click', function( field ) {
                play = false;
                hideBanner( current );
                showBanner( findObj( icons, field.findElement()));
        });


        showNextBanner().delay(3); 


        function hideBanner( which ) {
            icons[ which ].src = blankIconSRC;
            banners[ which ].hide();
        }


        function showBanner( which ) {
            icons[ which ].src = selectedIconSRC;
            banners[ which ].show();
            current = which;
        }


        // loops the hiding and showing of icons 
        // (mouseenter sets play to false)
        function showNextBanner() {
            if( play ) {
                if( !firstRun ) {
                    if( ++current == banners.length ) current = 0;    
                    var previous = 0;
                    ( current == 0 )? previous = banners.length - 1: previous = current - 1;
                    hideBanner( previous );
                } else {
                    icons[0].src = selectedIconSRC;
                    firstRun = false;
                }
                showBanner( current );
                showNextBanner.delay(3);
            }
        }
    }());

毕竟，客户想要一个 jQuery 解决方案，这样他就可以拥有通过 scriptaculous 无法获得的滑入效果。所以所有的工作都付诸东流。好消息是我可能只使用 jCarousel 并调整样式表。谢谢您的帮助！

4

2 回答 2

0

我怀疑正在发生的事情是您有多个 .delay 调用堆积。所以你有一个不到 3 秒的剩余时间，再次调用 showNextBanner，设置另一个延迟计时器。

当我阅读文档时，似乎 .delay 旨在在 jquery 事件管道中放置间隙，而不是实际延迟函数调用。您可能会受益于切换到调用 setTimeout 而不是延迟，这样您就可以处理超时，然后您可以在设置新的超时之前取消它（或者如果 play 设置为 false 则取消，然后在 play 再次为 true 时重置）这在.delay 的 JQuery 文档中提到

于 2011-09-08T22:20:36.480 回答
0

我的猜测是，由于您没有“取消” delay()'ed 功能，它们会停留太久，但是当它们触发时它们不会做任何事情，因为play是错误的。但是一旦比赛true再次开始，一切都会再次开始发挥作用。

delay()您可以使用clearTimeout()with value保存返回的值并取消计时器。

但是，我还建议您为所有横幅使用单个容器（也可以将图标放在那里），并在其上设置mouseenter/mouseleave事件，而不是在单个横幅上。然后只有一个元素可以启动/停止横幅旋转。如果您还将所有内容拆分为播放和停止旋转的特定功能，以及显示特定横幅的功能，您可能会获得更清晰的代码结构。

这是一个例子（这只是我为了好玩而不是编辑你的代码而放在一起的东西，所以它是完全不同的。抱歉。但希望你仍然可以用于某些东西）

于 2011-09-09T20:38:38.993 回答