स्थगित किए गए वादे के लिए इंटरफ़ेस को अधिक संवेदनशील बनाना

यह लेख न्यूफ़ैग्स के लिए है । और यह दिखाता है कि विलंबित वादों का उपयोग करके, आप इंटरफ़ेस को अधिक उत्तरदायी बना सकते हैं और निष्पादन समय को कम कर सकते हैं।

तो, कल्पना करें कि आपके पास एक कार्य है: "प्रोफ़ाइल संपादित करें" बटन को लागू करने के लिए, जिस पर एक फ़ॉर्म दिखाई देना चाहिए। और इस फॉर्म के फ़ील्ड के मान सर्वर से अतुल्यकालिक रूप से लोड किए जाते हैं।

असंगत इंटरफ़ेस

इस तरह के एक बटन के कार्यान्वयन का एक उदाहरण।

यहां क्या होता है और यह विकल्प क्यों खराब है

जैसा कि आपने देखा होगा, एक बटन पर क्लिक की प्रतिक्रिया एक लंबी देरी के साथ होती है। ऐसा क्यों? आइए चार्ट को देखें:



जैसा कि आप देख सकते हैं, इस दृष्टिकोण में, स्क्रिप्ट पहले डेटा को लोड करता है और प्रारंभिक कार्य करता है, और उसके बाद ही इंटरफ़ेस बदलता है। यह एक गलती है।

इंटरफ़ेस को किसी भी तरह से उपयोगकर्ता की कार्रवाइयों का जल्द से जल्द जवाब देना होगा।

उत्तरदायी इंटरफ़ेस

चलो चीजों को थोड़ा बेहतर बनाते हैं। निम्नलिखित उदाहरण में, हम एक फॉर्म बनाते हैं और इसे तुरंत प्रदर्शित करते हैं। और उसके बाद ही हम हैंडलर संलग्न करते हैं और सर्वर से डेटा लोड करते हैं।



आइए हमारे चार्ट को देखें:



जैसा कि आप देख सकते हैं, कुल रनटाइम नहीं बदला है। हालाँकि, अब उपयोगकर्ता अपने कार्यों पर प्रतिक्रिया बहुत पहले देखता है।

आस्थगित वचन

क्या आप जानते हैं कि आपको उसी जगह प्रॉमिस के लिए इंतजार नहीं करना होगा जहाँ आपने इसे बनाया था?

const promise = fetch() //      , ,    fetch() const response = await promise //   promise 

तो आप डाउनटाइम को कम कर सकते हैं - जब ब्राउज़र बस अतुल्यकालिक ऑपरेशन के पूरा होने का इंतजार करता है और किसी भी चीज में व्यस्त नहीं है।

जितनी जल्दी हो सके लंबे, अतुल्यकालिक ऑपरेशन चलाएं, लेकिन जल्द से जल्द उन्हें पूरा करने की उम्मीद करें।

अब, इस नियम को ध्यान में रखते हुए, आइए अपने फॉर्म पर वापस आते हैं।
निम्नलिखित उदाहरण में, हम एक क्लिक के तुरंत बाद डेटा डाउनलोड करने का अनुरोध भेजेंगे, लेकिन हम इसके पूरा होने का इंतजार नहीं करेंगे। सर्वर से प्रतिक्रिया की प्रतीक्षा करते समय डाउनटाइम के बजाय, हम एक उपयोगी काम करेंगे - एक फॉर्म बनाएं और इसे प्रदर्शित करें।



और यहाँ है कि हम क्या मिलता है:



जैसा कि आप ग्राफ में देख सकते हैं, शुरुआत में दो प्रक्रियाओं को समानांतर में निष्पादित किया जाता है। इस प्रकार, हमने लगभग एक सेकंड का रनटाइम बचाया।

मुझे उम्मीद है कि यह सामग्री किसी के लिए उपयोगी होगी