Вопрос по javascript, jquery – Предотвратить многократное нажатие в jQuery

9

Я создалJQuery переключатель контента, В общем, работает нормально, но есть одна проблема. Если вы щелкаете ссылки на стороне несколько раз, иногда становятся видны несколько фрагментов контента.

Проблема, скорее всего, лежит где-то в событии click. Вот код:

$('#tab-list li a').click(
    function() {
        var targetTab = $(this).attr('href');
        if ($(targetTab).is(':hidden')) {
            $('#tab-list li').removeClass('selected');
            var targetTabLink = $(this).parents('li').eq(0);
            $(targetTabLink).addClass('selected');
            $('.tab:visible').fadeOut('slow',
                function() {
                    $(targetTab).fadeIn('slow');
                }
            );
        }
        return false;
    }
);

Я попытался добавить блокировку к переходу, чтобы дальнейшие щелчки игнорировались при переходе, но безрезультатно. Я также попытался предотвратить запуск перехода, если что-то уже оживляет, используя следующее:

if ($(':animated')) {
    // Don't do anything
}
else {
   // Do transition
}

Но, кажется, всегда думают, что вещи оживляются. Любые идеи, как я могу предотвратить запуск анимации несколько раз?

Ваш Ответ

6   ответов
0

timeStamp свойство события, подобное этому, чтобы пропустить некоторое время между несколькими кликами:

var a = $("a"),
    stopClick = 0;


a.on("click", function(e) {
  if(e.timeStamp - stopClick > 300) { // give 300ms gap between clicks
     // logic here

    stopClick = e.timeStamp; // new timestamp given
  }


});
6

а не is (: animating).

По нажатию проверьте, установлена ли блокировка. Если нет, установите блокировку, запустите процесс, затем снимите блокировку, когда fadeIn завершится.

var blockAnimation = false;

$('#tab-list li a').click(
    function() {
        if(blockAnimation != true){
        blockAnimation = true;
        var targetTab = $(this).attr('href');
        if ($(targetTab).is(':hidden')) {
            $('#tab-list li').removeClass('selected');
            var targetTabLink = $(this).parents('li').eq(0);
            $(targetTabLink).addClass('selected');
            $('.tab:visible').fadeOut('slow',
                function() {
                    $(targetTab).fadeIn('slow', function(){ blockAnimation=false; });
                }
            );
        }
        }
        return false;
    }
);
Я попробовал этот подход, но, похоже, не смог заставить его работать. Он прошел тест блокировки каждый раз. White Elephant
0

$('#tab-list ul li').one( 'click', loadPage );
var loadPage = function(event) {
    var $this = $(this);
    $global_just_clicked = $this;
    var urlToLoad = $this.attr('href');
    $('#content-area').load( urlToLoad, pageLoaded );
}
$global_just_clicked = null;
var pageLoaded() {
    $global_just_clicked.one( 'click', loadPage );
}

Как видите, этот метод чреват недостатками: что происходит при нажатии другой вкладки перед загрузкой текущей страницы? Что делать, если запрос отклонен? что если это полная луна?

Ответ: этот метод - просто элементарная демонстрация. Правильная реализация будет:

not contain the global variable $global_just_clicked not rely on .load(). Would use .ajax(), and handle request cancellation, clicking of other tabs etc.

ПРИМЕЧАНИЕ. В большинстве случаев вам не нужно использовать этот обходной подход. Я уверен, что вы можете исправить свой код таким образом, чтобы несколько кликов на одной и той же вкладке не влияли на конечный результат.

JRH.

3

$(document).ready(function() {
    $(".clickitey").click(function () {
        if($("#mdpane:animated").length == 0) {
            $("#mdpane").slideToggle("slow"); 
            $(".jcrtarrow").toggleClass("arrow-open");
        }
    });
});

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

12

чтобы удалить событие click в начале вашей функции, а затем добавить событие click обратно, когда анимация завершится, чтобы щелчки во время действия не имели никакого эффекта.

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

Genius. Сохраняя мою задницу сегодня с этим ответом, я не могу понять, почему регистрировались события нескольких кликов, я подумал, что jQuery будет умным и остановит его, jQuery не может сделать все для вас, как оказалось. Спасибо.
1

которая работает:

$('#tab-list li a').click(
    function() {
        $('.tab:animated').stop(true, true);
        var targetTab = $(this).attr('href');
        if ($(targetTab).is(':hidden')) {
            $('#tab-list li').removeClass('selected');
            var targetTabLink = $(this).parents('li').eq(0);
            $(targetTabLink).addClass('selected');
            $('.tab:visible').fadeOut('slow',
                function() {
                    $(targetTab).fadeIn('slow');
                }
            );
        }
        return false;
    }
);

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

Похожие вопросы