अमेज़न ड्रॉप-डाउन सूची की पहेली

बेन केमन्स ने पाया कि अमेजन वेबसाइट पर डिपार्टमेंट द्वारा डिपार्टमेंट ऑफ ड्राप-डाउन लिस्ट में, हॉवर का प्रभाव बहुत तेज है, बिल्कुल बिना देरी के। यह पिछली शताब्दी के 90 के दशक में विकसित पुराने नियम का उल्लंघन करता है: एक सबमेनू आइटम प्रदर्शित करने से पहले, तथाकथित हिस्टैरिसीस, देरी आवश्यक है।



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


मैक ओएस पर एक समस्या का एक उदाहरण। देरी की कमी के कारण, NEXTSTEP में ग्रीन पथ काम नहीं करेगा और विजेट्स को विरासत में मिला होगा।

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



बेन ने गहराई से सोचा कि अमेज़ॅन ने इस समस्या को कैसे हल किया; प्रश्न ने उन्हें एक स्तूप में ले लिया, जैसे कि एक भौतिक विज्ञानी सड़क पार कर रहा था - नर्ड स्निपिंग कॉमिक में मोनो-ओम प्रतिरोधों के एक अनंत ग्रिड के दो बिंदुओं के बीच प्रतिरोध की गणना करने का एक स्पष्ट रूप से बेकार काम है। आखिरकार, अगर कोई देरी नहीं हुई, जब किसी अन्य मेनू आइटम को छुआ गया था, तो एक नया तत्व बाहर निकल जाएगा, और यह असंभव होगा कि पहले से ही जो देखा गया था, वह हो सकता है, उदाहरण के लिए, ट्विटर बूटस्ट्रैप में।



आपने अमेज़न वेबसाइट के साथ क्या किया है? बेन ने पाया कि यहां कर्सर पथ को एक विशेष तरीके से निर्धारित किया जाता है।



प्रत्येक कर्सर स्थिति के लिए, एक त्रिकोण को सूची के ऊपरी और निचले कोनों और कर्सर (आकृति में नीले रंग में हाइलाइट किया गया) के साथ गणना की जाती है। यदि कर्सर नीले त्रिकोण में किसी अन्य तत्व के क्षेत्र पर पड़ता है, तो पहले से ही खुला सबमेनू बदल जाएगा, लेकिन एक देरी के साथ जो उपयोगकर्ता को कर्सर को सबमेनू के क्षेत्र में खींचने की अनुमति देगा। यह कर्सर के हिट होने पर तुरंत Android के लिए ऐपस्टोर पर सबमेनू को बदलने का कोई मतलब नहीं है - शायद उपयोगकर्ता कर्सर को आइटम पर ले जाता है क्लाउड ड्राइव के बारे में और जानें। यदि कर्सर त्रिकोण के बाहर है, तो सबमेनू बिना देरी के तुरंत स्विच करेगा।

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