मेरे उत्पाद Front Prep के प्रश्न सूची पृष्ठों पर, मैं साक्षात्कार प्रश्नों के बगल में कंपनी के लोगो प्रदर्शित करता हूँ। जब आप किसी लोगो पर होवर करते हैं, तो एक टूलटिप कंपनी का नाम दिखाता है। मैंने टूलटिप विलंब को 0 पर सेट किया था, इसलिए जैसे ही मैं कर्सर को पृष्ठ पर ले जाता, टूलटिप तुरंत दिखाई देते थे। इसे ठीक करने के लिए, मैंने 200ms का संक्रमण विलंब जोड़ा, लेकिन इसने एक नई समस्या पैदा की: कई लोगो के बीच जाने पर हर बार समान 200ms विलंब की प्रतीक्षा करनी पड़ती थी, जो सुस्त लगता था। यह पोस्ट ब्राउज़र टूलबार और वेबसाइटों में पाए जाने वाले एक छोटे इंटरैक्शन पैटर्न के बारे में है। मेरा समाधान तीन भागों में विभाजित है: किसी लोगो पर होवर करने पर, टूलटिप खुलने से पहले 200ms प्रतीक्षा करता है। जब टूलटिप बंद होता है, तो 300ms का टाइमर शुरू होता है, जिसे मैं वार्म विंडो कहता हूँ। यदि आप इस टाइमर के चलते समय किसी अन्य लोगो पर होवर करते हैं, तो टूलटिप तुरंत खुल जाता है, विलंब को छोड़ते हुए। जब टाइमर समाप्त होता है, तो पृष्ठ ठंडा हो जाता है, और 200ms की प्रतीक्षा वापस आ जाती है। Front Prep में, मेरे टूलटिप्स Radix और Motion के साथ बनाए गए हैं। कोड घटकों के बीच isWarm स्थिति को ट्रैक करने के लिए एक useContext वेरिएबल का उपयोग करता है। होवर पर, घटक जाँचता है कि पृष्ठ गर्म है या नहीं; यदि हाँ, तो टूलटिप तुरंत खुलता है; अन्यथा, यह 200ms का टाइमर शुरू करता है। show फ़ंक्शन गर्म स्थिति को एक इंस्टेंट फ्लैग में कॉपी करता है, जिसका उपयोग CSS डेटा विशेषता के माध्यम से प्रवेश एनीमेशन को छोड़ने के लिए करता है। यह पैटर्न तुरंत पॉपअप और सुस्त विलंब दोनों से बचकर उपयोगकर्ता अनुभव में सुधार करता है। यह एक सरल दृष्टिकोण है जिसे आप अपने कोडबेस में लागू कर सकते हैं। मुख्य संस्थाएँ: कंपनियाँ: Front Prep।
स्रोत: Hacker News · HeadlinesBriefing द्वारा सारांशित