Игнорировать несколько нажатий кнопок после первого нажатия на веб-приложение iPhone с помощью jQuery Mobile?

Question

Примите кнопку A в веб-приложении HTML5, созданном с помощью jQuery Mobile.

Если кто-то нажимает кнопку A, мы вызываем foo (). Foo () вызывается один раз, даже если пользователь дважды нажмет кнопку A.

Мы попытались использовать event.preventDefault (), но это не помешало второму нажатию вызвать foo (). Функция event.stopImmediatePropagation () может работать, но она также останавливает другие методы в стеке и может не привести к чистому обслуживанию кода.

Другие предложения? Поддержание переменной отслеживания кажется ужасно уродливым решением и нежелательным.

Answer 1

Вы можете установить флаг и проверить, можно ли запускать функцию foo() или отменить привязку события на время, когда пользователь не сможет использовать его, а затем повторно привязать обработчик события послезадержка (всего пара вариантов).

Вот что я бы сделал.Я бы использовал тайм-аут, чтобы исключить последующие события:

$(document).delegate('#my-page-id', 'pageinit', function () {

    //setup a flag to determine if it's OK to run the event handler
    var okFlag = true;

    //bind event handler to the element in question for the `click` event
    $('#my-button-id').bind('click', function () {

        //check to see if the flag is set to `true`, do nothing if it's not
        if (okFlag) {

            //set the flag to `false` so the event handler will be disabled until the timeout resolves
            okFlag = false;

            //set a timeout to set the flag back to `true` which enables the event handler once again
            //you can change the delay for the timeout to whatever you may need, note that units are in milliseconds
            setTimeout(function () {
                okFlag = true; 
            }, 300);

            //and now, finally, run your original event handler
            foo();
        }
    });
});

Answer 2

Я создал образец здесь http://jsfiddle.net/kiliman/kH924/

Если вы используете кнопки типа <a data-role="button">, статус «отключен» отсутствует, но вы можете добавить соответствующий класс, чтобы придать ему отключенный вид.

В вашем обработчике событий проверьте, имеет ли кнопка класс ui-disabled, и если это так, вы можете сразу же вернуться. Если этого не произойдет, добавьте класс ui-disabled, а затем вызовите foo()

Если вы хотите снова включить кнопку, просто удалите класс.

$(function() {
    $('#page').bind('pageinit', function(e, data) {
        // initialize page
        $('#dofoo').click(function() {
            var $btn = $(this),
                isDisabled = $btn.hasClass('ui-disabled');
            if (isDisabled) {
                e.preventDefault();
                return;
            }
            $btn.addClass('ui-disabled');
            foo();
        });
    });

    function foo() {
        alert('I did foo');
    }
});