تحديث الصفحة عبر JavaScript: دليل كامل للمبتدئين

لماذا تحديث الصفحة بالكود أصلاً؟

\n\n

تخيل: أنت تكتب دردشة، لعبة عبر الإنترنت، أو نموذج تواصل. المستخدم أرسل البيانات - وتوقف كل شيء. لرؤية النتيجة، عليه الضغط على F5 أو النقر بالماوس على زر المتصفح. غير مريح، أليس كذلك؟

\n\n

والآن تخيل أن الصفحة تحدث نفسها بنفسها - بمجرد اكتمال الإجراء. سحر؟ لا، إنها JavaScript النقية وبضعة أسطر من الكود. هذا بالضبط ما سنتحدث عنه اليوم.

\n\n

الموضوع بسيط للوهلة الأولى، ولكن حتى المطورين ذوي الخبرة يخلطون أحيانًا بين طريقتي location.reload() و window.location.href. سنشرح جميع الخيارات، والمزالق، وأفضل الممارسات. هيا بنا!

\n\n

الشخصية الرئيسية: location.reload()

\n\n

الطريقة الأكثر شيوعًا وصحة لتحديث الصفحة عبر JavaScript هي طريقة location.reload(). تقوم بالضبط بما هو مكتوب على العلبة: إعادة تحميل المستند الحالي.

\n\n

// أبسط خيار\nlocation.reload();

\n\n

لكن هناك فارق بسيط. تقبل هذه الطريقة معلمة اختيارية واحدة - قيمة منطقية forceGet.

\n\n

\n
• location.reload() - يعيد تحميل الصفحة باستخدام ذاكرة التخزين المؤقت للمتصفح، إذا كان ذلك ممكنًا.
\n
• location.reload(true) - تحميل إجباري من الخادم، متجاهلاً ذاكرة التخزين المؤقت.
\n

\n\n

الفرق ملحوظ عند العمل مع البيانات الديناميكية. إذا كنت بحاجة مضمونة للحصول على نسخة محدثة من الصفحة - استخدم true.

\n\n

مقارنة: reload() مقابل window.location.href

\n\n

على Stack Overflow كثيرًا ما يُسأل: "هل يمكن ببساطة تعيين window.location.href = window.location.href؟"

\n\n

الإجابة المختصرة: يمكن، لكنها حل مؤقت. الإجابة الطويلة - انظر الجدول.

\n\n

جدول مقارنة طرق إعادة تحميل الصفحة

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

الطريقة	السلوك	تستخدم ذاكرة التخزين المؤقت	موصى بها
location.reload()	يعيد تحميل الصفحة	نعم (افتراضيًا)	✅ نعم
location.reload(true)	إعادة تحميل إجباري من الخادم	لا	✅ نعم
window.location.href = window.location.href	يعيد التوجيه إلى نفس الصفحة	نعم	⚠️ بحذر
window.location = window.location	نفس الشيء، بشكل أقصر	نعم	⚠️ بحذر
history.go(0)	الانتقال إلى الصفحة الحالية في السجل	نعم	❌ قديم

\n\n

كما ترى، location.reload() هي الطريقة الأكثر موثوقية وقابلية للتنبؤ. الخيارات الأخرى قد لا تعمل بشكل مستقر في متصفحات مختلفة.

\n\n

التحديث التلقائي على فترات زمنية محددة

\n\n

أحيانًا تحتاج الصفحة إلى التحديث تلقائيًا - على سبيل المثال، لعرض أسعار العملات أو حالة الخادم. هنا يأتي دور setTimeout أو setInterval.

\n\n

التحديث بعد 5 ثوانٍ من التحميل

\n\n

// انتظر 5 ثوانٍ، ثم أعد التحميل\nsetTimeout(function() {\n    location.reload(true);\n}, 5000);

\n\n

التحديث الدوري كل 30 ثانية

\n\n

// تحديث الصفحة كل 30 ثانية\nsetInterval(function() {\n    location.reload();\n}, 30000);

\n\n

هام: لا تفرط في استخدام التحديث التلقائي. إذا كانت الصفحة