تحديث صفحة الويب تلقائيًا: إعادة التحميل وطرق إيقافها

إذا كنت تزور موقعًا لا تملكه

ابحث أولًا عن خيار التحديث في الصفحة أو لوحة المعلومات. إذا قررت استخدام إضافة في كروم على الحاسوب، افتح متجر Chrome الإلكتروني، وحدد الإضافة التي تثق بها، ثم «إضافة إلى كروم» وراجع الصلاحيات قبل التأكيد. تشرح Google أن بعض المؤسسات تمنع الإضافات على أجهزة العمل أو الدراسة. ^[1]

اقرأ وصف الإضافة: هل تخص التبويب الحالي، أم كل التبويبات؟ وهل يمكن إيقافها بسهولة؟ اضبط فترة مناسبة للمهمة، ثم راقب دورة واحدة على صفحة لا تحتوي عملًا غير محفوظ. ظهور كلمة «تحديث» في اسم الأداة لا يوضح وحده طريقة عملها.

راجع الصلاحيات وخيار الإيقاف

من قائمة كروم افتح «الإضافات» ثم «إدارة الإضافات». تتيح التفاصيل ضبط الوصول إلى بيانات المواقع بحسب الخيارات المتاحة، ويمكن تعطيل الإضافة من صفحة الإدارة. لا تحتاج أداة لصفحة معينة إلى اختيار الوصول إلى جميع المواقع دون مراجعة السبب. ^[1]

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

إذا كنت تملك الصفحة: مؤقت بسيط

تعيد location.reload() تحميل العنوان الحالي. وتستدعي setTimeout دالة مرة واحدة بعد تأخير بالمللي ثانية؛ فالعدد 30000 هنا يساوي ثلاثين ثانية. وقد يتأخر التنفيذ أكثر من ذلك، خاصة مع التبويبات غير النشطة. ^{[2] [3]}

المثال التالي يخص صفحة تملك شيفرتها، ويُوضع قرب نهاية محتواها. يبدأ المؤقت عند تحميل الصفحة، ويمكن للقارئ إلغاؤه بزر ظاهر. وإذا أعيد تحميلها، تُنفذ الشيفرة مجددًا ويبدأ مؤقت جديد؛ لذا لا يحفظ المثال اختيار الإيقاف بين الزيارات.

<button id="stop-refresh" type="button">إيقاف التحديث</button>
<p id="refresh-status">ستعاد الصفحة بعد نحو 30 ثانية.</p>
<script>
  const timer = setTimeout(() => location.reload(), 30000);
  document.querySelector("#stop-refresh").addEventListener("click", () => {
    clearTimeout(timer);
    document.querySelector("#refresh-status").textContent =
      "أُلغي موعد إعادة التحميل في هذه الزيارة.";
  });
</script>

ماذا يفعل زر الإيقاف؟

يحتفظ المتغير timer بمعرّف المؤقت، ثم يمرره زر الإيقاف إلى clearTimeout. بذلك يلغي موعد إعادة التحميل الذي لم ينفذ بعد، ويستبدل النص برسالة واضحة. إيقاف هذا المؤقت لا يلغي مؤقتًا آخر أو تحديثًا ينفذه برنامج مختلف في الصفحة. ^[4]

جرب في نسخة تطوير: افتح الصفحة واترك الموعد يمر، ثم افتحها مرة أخرى واضغط الإيقاف قبل الموعد. راقب أن عنوان الحالة تغير وأن الصفحة لم تُعد تحميلها. وراجع هذه الحالتين مع أي شيفرة أخرى تضيفها؛ فلا تستدل بتغير النص وحده على توقف جميع مصادر التحديث.

قد يكفي تحديث البيانات وحدها

تتيح JavaScript تغيير محتوى الصفحة ديناميكيًا. لذلك يمكن للوحة متابعة أن تستبدل رقمًا أو بطاقة بيانات بدل إعادة تحميل كل المحتوى. حدد النطاق الذي يحتاج التحديث قبل اختيار الأداة: خبر جديد أم الصفحة كلها؟ ^[6]

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

دع القارئ يتحكم في التحديث

يبين معيار W3C 2.2.2 ضرورة وسيلة لإيقاف المحتوى الذي يتجدد تلقائيًا أو إخفائه أو التحكم في تكراره حين يعرض بجوار محتوى آخر، ما لم يكن التحديث ضروريًا للنشاط. لذلك وضوح زر التحكم جزء من تصميم الصفحة، لا مجرد تفصيل في المؤقت. ^[5]

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