في صفحات قائمة الأسئلة لمنتجي Front Prep، أعرض شعارات الشركات بجانب أسئلة المقابلة. عند التمرير فوق الشعار، يظهر تلميح يعرض اسم الشركة. كنت قد قمت بتعيين تأخير التلميح إلى 0، لذلك كانت التلميحات تظهر فورًا أثناء تحريك المؤشر عبر الصفحة. لإصلاح ذلك، أضفت تأخير انتقال 200 مللي ثانية، لكن هذا خلق مشكلة جديدة: التنقل بين شعارات متعددة يعني انتظار نفس التأخير 200 مللي ثانية في كل مرة، مما يجعله بطيئًا. تتعلق هذه المقالة بنمط تفاعل صغير موجود في أشرطة أدوات المتصفح والمواقع الإلكترونية. ينقسم حلي إلى ثلاثة أجزاء: عند التمرير على شعار، ينتظر التلميح 200 مللي ثانية قبل فتحه. عندما يُغلق التلميح، يبدأ مؤقت 300 مللي ثانية، أسميه النافذة الدافئة. إذا قمت بالتمرير فوق شعار آخر أثناء عمل هذا المؤقت، يفتح التلميح فورًا، متجاوزًا التأخير. عندما ينتهي المؤقت، تصبح الصفحة باردة، ويعود الانتظار 200 مللي ثانية. في Front Prep، تم بناء تلميحاتي باستخدام Radix و Motion. يستخدم الكود متغير useContext لتتبع حالة isWarm بين المكونات. عند التمرير، يتحقق المكون من أن الصفحة دافئة؛ إذا كانت كذلك، يفتح التلميح فورًا؛ وإلا، يبدأ مؤقت 200 مللي ثانية. تقوم دالة show بنسخ الحالة الدافئة إلى علم فوري، يستخدمه CSS لتخطي حركة الدخول عبر سمة بيانات. يحسن هذا النمط تجربة المستخدم بتجنب كل من النوافذ المنبثقة الفورية والتأخيرات البطيئة. إنه نهج بسيط يمكنك تنفيذه في قاعدة الأكواد الخاصة بك. الكيانات الرئيسية: الشركات: Front Prep. الأسئلة الشائعة: ما هو نمط النافذة الدافئة للتلميحات؟ يضيف نمط النافذة الدافئة تأخيرًا قدره 200 مللي ثانية قبل فتح التلميح، ولكن بعد الإغلاق، يبدأ مؤقت تبريد قدره 300 مللي ثانية. إذا قمت بالتمرير فوق تلميح آخر خلال هذا التبريد، فإنه يفتح فورًا، مما يتجنب التأخيرات المتكررة عند التنقل بين العناصر القريبة.
المصدر: Hacker News · لخّصه HeadlinesBriefing