Не позволяйте пользователю нажимать на изображение слишком много раз

Question

У меня есть это изображение, на котором я дал функцию onclick, которая в свою очередь вызывает функцию, которая выполняет некоторую анимацию на экране. Теперь, если вы нажимаете на изображение слишком много раз слишком быстро, анимация продолжается столько раз, даже после того, как пользователь прекратил щелкать. Я не хочу, чтобы это произошло. Я хочу, чтобы пользователь мог щелкнуть в следующий раз только после завершения анимации (прочитайте JQuery animate) для предыдущего щелчка.

Answer 1

Вы можете создать логическое значение, установить его в значение false, когда анимация начинается, и true, когда анимация заканчивается, и true по умолчанию. Разрешить пользователю щелкать, когда для логического значения установлено значение true.

Answer 2

Вы можете либо просто позвонить

.stop( true, true )

перед вызовом любой функции jQuery fx , либо вы можете проверить, является ли целевой элемент в данный момент анимированным, например

if(!$( '#myimage' ).is( ':animated' ) ) {
}

Первое решение просто «сбрасывало» анимацию (параметры указывают, очищают очередь и переходят в конец).С последним решением вы могли бы просто не допустить дальнейших кликов (обработчиков) от стрельбы.

Ссылка: .stop(), :animated selector

Answer 3

Возможно, существует более предпочтительный объектно-ориентированный способ (см. Замыкания), но вы можете сделать это просто так:

var isInFunction = false;

function myHandler() {
    if (isInFunction) {
        return;
    }
    isInFunction = true;

    // do function logic

    isInFunction = false;
}

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

Имейте в виду, что это означает, что эта переменная будет одинаковой для ВСЕХ изображений, поэтому, если вы хотите иметь возможность анимировать несколько изображений одновременно, вам придется каким-то образом разделять переменные для каждого изображения.

Способ jAndy лучше, чем этот, потому что :animated уже сделает то, что я предлагаю, и для каждого изображения / элемента, но без каких-либо дополнительных издержек / обратных вызовов с вашей стороны!

Answer 4

Что вы можете сделать, это установить любой тег изображения на 1 при нажатии, а после завершения анимации установить тег обратно на 0.

Вы можете реализовать проверку анимации, только если значение тега равно 0 * 1003.*