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"); }); }); }); 

चेकबॉक्स को स्विच करते समय, एक नया कदम कतार में डाल दिया जाता है - सर्वर में परिवर्तन भेजने का कार्य। यदि एक ही समय में कतार खाली थी, तो कार्य तुरंत निष्पादन के लिए लॉन्च किया गया है (ajaxQueen फ़ंक्शन में dequeue)। फ़ंक्शन में AJAX अनुरोध को निष्पादित करने के बाद, अगला चरण कतार से लिया जाता है और निष्पादित किया जाता है।

संपर्क को बचाने के अनुरोध को उसी तरह से कतारबद्ध किया गया है और सभी परिवर्तनों के काम करने के बाद निष्पादित किया गया है।

 function doAction(link){ $.get(link, function(data){ $('body').append(data); }, 'html'); } $("a.saveButton") .click(function(){ ajaxQueue(doAction($(this).attr("href"))); }); 

पुनश्च: इस लेख को लिखने की प्रक्रिया में, मैं इस नतीजे पर पहुंचा कि संपर्क को बचाने से पहले अभी भी बल्क में सभी चेकबॉक्सों को स्थानांतरित करना आसान है (यह इस बात का सवाल है कि लेख लिखना क्यों उपयोगी है :)), लेकिन हो सकता है कि वर्णित योजना किसी के लिए उपयोगी हो। अन्य कार्य।