javascript - плохой алгоритм, запускающий параллельные циклы

Я создал относительно небольшой сценарий динамической ротации баннеров с иконками внизу для выделения определенного баннера. Запуск мыши над баннером приостанавливает показ, но иногда, когда я убираю мышь от своего баннера, задержка для определенных баннеров сокращается. Я бы даже понял, если бы это произошло только один раз, но тогда задержка устанавливается на это более короткое время каждый раз, когда баннер возвращается в ротации, и часто сокращение происходит в другом месте в списке баннеров, как Что ж. Иногда это можно исправить еще не определенным набором действий. Я начинаю подозревать, что моя логика ловит цикл где-то посередине, поэтому процесс разветвляется, запускает два цикла, которые, по-видимому, ускоряют вызов функции 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 и настроить таблицу стилей. Спасибо за помощь!