Как поставить функцию jQuery в очередь, чтобы предотвратить некорректное поведение, если она вызывается снова слишком быстро

Question

Я написал функцию, которая срабатывает при нажатии определенного пункта меню. по существу, код заменяет (путем изменения класса на .activedock) док в нижней части страницы вместе с именем упомянутой док-станции, которая извлекается из ('li') в меню, по которому щелкнули. Это немного сложно сформулировать, но, надеюсь, это имеет смысл.

Все это анимировано с помощью расширенных jquery-ui-версий addClass и removeClass, чтобы эффект скольжения дока снизу экрана и замена выбранного дока была сдвинута на место. В то же время имя дока исчезает, заменяется, и новое имя возвращается на место.

Это все работает замечательно, однако эффект облажается, если я выбираю другой пункт меню, пока анимация все еще происходит. Что нужно сделать, это изменить приведенный ниже код, чтобы просто поставить функцию в очередь, если она вызывается снова, пока анимация все еще происходит. В качестве альтернативы, если это окажется сложным, я был бы рад просто предотвратить повторный вызов функции, пока она еще активна.

Кто-нибудь знает, как я поступил бы по этому поводу?

function selectFilter($this) {


var $filtername = $this.text();
var $activedock = $('.activedock');
$selected_dock = $('#' + $filtername);
$name = $('#filter_name').find('h1');


if ( $filtername == $activedock.attr('id') ) {

return false;

}


var $filtertext = $filtername;      
        $activedock.removeClass('activedock', 1000);
                $name.fadeOut('1000', function() {

                    $selected_dock.addClass('activedock','1000');

                    $name.text($filtertext);
                    $name.fadeIn('1000', function() {

                    var $menuWidth = $('#filter_name').width();

                    $('#filter_menu').css('min-width', $menuWidth);


                    });
                });

}

P.S. Я относительно новичок в jQuery, поэтому приношу свои извинения, если в приведенном выше коде не используются лучшие практики и т. Д. .... Я все еще учусь.

Также вышеупомянутая функция вызывается, когда пользователь щелкает пункт меню, как показано в коде ниже: -

//Show filter menu

$(document).ready(function() {

$('#full-width-layout_c1_col-1-1_1').on( 'mouseenter mouseleave click', '#filter_name', function(event) {

var $menu = $('#filter_menu');
var $icon = $('#popupicon');


//Hover over Filter Name
if (event.type == 'mouseenter') {
                    $menu.addClass('menu_hovered_item');
                    $icon.show('fade', 200);
        }
        else if (event.type == 'mouseleave'){
                    $menu.removeClass('menu_hovered_item');
                    $icon.hide('fade', 200);
            }



//Open menu on click
        else if (event.type == 'click'){


            $menu.show('fade','slow');

//hover or click on menu item

                    $('#full-width-layout_c1_col-1-1_1').on( 'mouseenter mouseleave click', '#filter_menu li', function(event) {

                    var $menuItem = $(this);

                            if (event.type == 'mouseenter') {
                            $menuItem.addClass('menu_hovered_item');
                            }
                            else if (event.type == 'mouseleave'){
                            $menuItem.removeClass('menu_hovered_item');
                            }

                            else if (event.type == 'click'){
                            var $this = $(this);
                            selectFilter($this);
                            $menu.hide();
                            }

                    });

        }    

    });  
});

Answer 1

Использование, Стоп (true, true) , перед каждой функцией анимации,

, например: $(this).stop(true, true).fadeIn(),

$(this).stop(true, true).fadeOut(),

$(this).stop(true, true).show('fade','slow').

Первый true в stop очистит очередь анимации, а второй true немедленно завершит текущую анимацию.

Answer 2

Определить анимацию

Можно определить, работает ли анимация для определенного элемента.

Техника подробно описана в этой статье .

var wait = setInterval(function() {
    if( !$("#element1, #element2").is(":animated") ) {
        clearInterval(wait);
        // This piece of code will be executed
        // after element1 and element2 is complete.
    }
}, 200);

Предотвращение создания очереди анимации

В качестве альтернативы, вы можете заблокировать очередь анимации, используя этот метод .