Последовательное Сохранение Настроек С Использованием Очередей Ajax И Jquery.

Добрый день, коллеги! В одном из проектов мне понадобилось сохранить выбранные пользователем настройки (сделанные в виде чекбоксов).

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

Подробности реализации под катом.

Начну с изложения проблемы.

Есть объект, который представляет собой набор контактной информации.

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

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

Можно просто сохранить с помощью асинхронных AJAX-запросов, но в этом случае может возникнуть не очень приятная ситуация, когда на сервер отправляется очередное изменение — и где-то по пути оно застревает, а пользователь уже пытается сохранить контакт. В результате он получит не совсем то, что ожидал.

Возникает вопрос — как сделать так, чтобы изменения сохранялись строго по порядку.

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

В результате у меня получился такой код:

   

 function ajaxQueue(func){
     $(document).

queue("ajax",func);
     if($(document).

queue("ajax").

length == 1)
         $(document).

dequeue("ajax");
 }
 
 $(".

contact input:checkbox")
     .

change(function(){
         var $_ = $(this),
             checked = $_.is(":checked"),
         $_.attr("disabled","disabled");   
         ajaxQueue(function(){
             $.

post("/ajax/check_elem",
                     {name: $_.attr("id"),
                     value: checked})
             .

error(function(){
                 $_.val((!checked)?"on":"off"); 
             })
             .

complete(function() {
                 $_.removeAttr("disabled");
                 $(document).

dequeue("ajax");
             });
     });
 });
 

   

Если очередь оказалась пустой, то функция сразу запускается на исполнение (dequeue в функции ajaxQueue).

После завершения запроса AJAX в функции следующий шаг удаляется из очереди и выполняется.

Запрос на сохранение контакта ставится в очередь аналогичным образом и выполняется после обработки всех изменений.

function doAction(link){ $.

get(link, function(data){ $('body').

append(data); }, 'html'); } $("a.saveButton") .

click(function(){ ajaxQueue(doAction($(this).

attr("href"))); });

PS: В процессе написания этой статьи я пришёл к мысли, что всё-таки проще перенести все состояния чекбокса скопом перед сохранением контакта (это к вопросу о том, почему полезно писать статьи :) ), но возможно описанная мною схема будет полезна кому-то и для других задач.

Теги: #jQuery #JavaScript #JavaScript #jQuery

• Как Тратить Меньше Времени И При Этом Найти Работу

  19 Oct, 24

• Множественные Эксперименты: Теория И Практика

  19 Oct, 24

• Романтика В (Неромантических) Играх: Линейные Сюжеты

  19 Oct, 24

• Блоги На Русском Языке

  19 Oct, 24

• Пятнадцать Самых Популярных Криптовалют После Биткойна

  19 Oct, 24

• Два Новых Четырехпроцессорных Процессора Proliant Dl

  19 Oct, 24

• Тестирование Процессора Intel Core I9-11900K И Анализ Результатов Passmark

  19 Oct, 24

• Разваливающийся Тигр, Скрытый Каньон

  19 Oct, 24

• Поиск Драйверов По Идентификатору Устройства

  19 Oct, 24

• Как Москва Помогает It-Предпринимателям

  19 Oct, 24