Быстрые щелчки приводят к некорректной работе слайд-представления?

Question

Быстрые щелчки приводят к некорректной работе слайд-представления?

0

Вот рабочая демонстрация. http://jsfiddle.net/Evqqp/1/

Пожалуйста, проверьте демо, чтобы легко понять проблему. Нажмите на стрелки быстро, и вы увидите, как беспорядок открывается.

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

Код, в котором я выполняю анимацию

$(".rightArrow").on("click", function () {
    if ((Math.abs(parseInt($(".slideBox").css("margin-left"))) + $(".mainDiv").width()) < $(".slideBox").width()) {
        $(".slideBox").animate({
            "margin-left": parseInt($(".slideBox").css("margin-left")) - $(".mainDiv").width()
        }, 300, checkRightArrow);
        $(".leftArrow").show();
    } else {
        $(".rightArrow").hide();
    }
});

спасибо

ksskr 12 нояб. 2013, в 17:26

Источник

0

stop() сделает свое дело. :)
Ivanka Todorova 12 нояб. 2013, в 15:53

Теги:

javascript

jquery

html

css

slide

4 ответа

1

Вы должны добавить

event.stopPropagation();

после:

$(".rightArrow").on("click", function () {

так:

$(".rightArrow").on("click", function () {
     event.stopPropagation();
     ...

RicardoGonzales 12 нояб. 2013, в 14:23

0

Не думай, что это что-то изменит. Проблема в очереди анимации, а не в обработчиках событий.
jbabey 12 нояб. 2013, в 15:59

1

Всякий раз, когда вы работаете с анимацией, вы всегда должны stop() предыдущую анимацию элемента перед ее повторной анимацией.

$(".slideBox").stop(true, true).animate(...

http://jsfiddle.net/Evqqp/4/

jbabey 12 нояб. 2013, в 13:45

0

Здесь есть проблема .. Если вы нажмете быстро, это приведет к пустому слайду.
ksskr 12 нояб. 2013, в 15:59
0

@ksskr, потому что ваши расчеты неверны, а не потому, что анимация не исправлена. Вы не должны полагаться на присутствующую стрелку, чтобы предотвратить чрезмерную прокрутку пользователя. эта проверка должна быть в обработчике щелчка стрелок.
jbabey 12 нояб. 2013, в 16:00
0

добавление чека для "анимированного" работало. Я согласен, что есть и другие способы добиться того, что я сделал. Например, установите значение margin-left для var, а затем вызовите animate, и в этом случае я могу использовать остановку, как вы предложили. Спасибо хоть. рабочая версия здесь jsfiddle.net/Evqqp/5
ksskr 12 нояб. 2013, в 16:03

Показать ещё 1 комментарий

1

Попробуйте .stop(true,true)

$(".slideBox").stop(true,true).animate({

Tushar Gupta 12 нояб. 2013, в 13:13

Ещё вопросы

Не думай, что это что-то изменит. Проблема в очереди анимации, а не в обработчиках событий.
Здесь есть проблема .. Если вы нажмете быстро, это приведет к пустому слайду.
@ksskr, потому что ваши расчеты неверны, а не потому, что анимация не исправлена. Вы не должны полагаться на присутствующую стрелку, чтобы предотвратить чрезмерную прокрутку пользователя. эта проверка должна быть в обработчике щелчка стрелок.
добавление чека для "анимированного" работало. Я согласен, что есть и другие способы добиться того, что я сделал. Например, установите значение margin-left для var, а затем вызовите animate, и в этом случае я могу использовать остановку, как вы предложили. Спасибо хоть. рабочая версия здесь jsfiddle.net/Evqqp/5

D4V1D · Accepted Answer · 2013-11-12T13-18-00.000Z

Проверьте, что ваш элемент в настоящее время анимируется следующим

if(!$('#myElement').is(':animated'))
{
    // Do your animation here
}

это сработало. Спасибо. jsfiddle.net/Evqqp/5