11 июня 2014, 20:02

Блокировки в Javascript

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

Для этого можно пользоваться очень простой и короткой «библиотекой» (не уверен, что так можно назвать пять строк кода, но всё же):

(function() {
    var blocks = {};
    window.setBlock = function(name) { if (name in blocks) return false; return blocks[name] = true; }
    window.clearBlock = function(name) { delete blocks[name]; return true; }
})();



Как это действует:

  1. Функция setBlock() ставит блокировку по указанному коду. Если блокировки не было — возвращает true, если блокировка уже есть, возвращает false.
  2. Функция clearBlock() снимает блокировку по указанному коду.

Пример использования данных функций:

$('.my-submit').on('click', function() {
    if (setBlock('my-form-submit')) {
        // Устанавливаем блокировку в первый раз.
        // Тут можно ещё, например, выставить кнопке параметр disabled.

        // Отправляем нашу форму
        $.post('form-submit.php', function() {
            // Обрабатываем ответ формы, как это необходимо.

            // После обработки снимаем блокировку: теперь форму можно отправлять снова
            clearBlock('my-form-submit');
        }).fail(function() {
            // Эта функция будет выполнена, если произойдёт ошибка связи (скажем, у пользователя сломается интернет).
            // В таком случае нам важно снять блокировку, чтобы пользователь мог отправить форму снова,
            // когда его интернет заработает.
            clearBlock('my-form-submit');
        });
});

В приведённом примере до тех пор, пока не будет вызвана одна из функций clearBlock(), повторные нажатия на кнопку ни к чему не приведут, поскольку функция setBlock() будет возвращать false.

В качестве имени блокировки можно использовать любой текст. Например, на одном из разрабатываемых сейчас проектов я таким образом реализовал работу лайков: при добавлении лайка к элементу на странице ставится блокировка с именем "like" + elementID, таким образом, одновременно может идти несколько блокировок на разные действия.