Announcement Title

Your first announcement to every user on the forum.

JS إعادة تحميل الصفحة بعد ثوانٍ

Admin

مدير شركة انكور التطويرية
طاقم الإدارة
ادارة انكور
بسم الله الرحمن الرحيم

تساعد إعادة التحميل التلقائي على إعادة تحميل التحديث الأخير على صفحة الويب. إنه يعزز تجربة المستخدم لرؤية المحتوى الجديد دون تدخل يدوي. هناك طرق مختلفة لتحقيق إعادة تحميل الصفحة. تسرد هذه المقالة بعضًا منها باستخدام JavaScript.
إعادة تحميل الصفحة بعد ثوانٍ

يستخدم هذا المثال السريع طريقة JavaScript setTimeout() لتعيين مؤقت إعادة تحميل الصفحة. في هذا المثال، يتم إعادة تحميل الصفحة بعد كل 5000 مللي ثانية.​

مثال سريع​

HTML:
<!DOCTYPE html>
<html>

<head>
    <title>Reload Page in JavaScript after (n) Seconds Example</title>
</head>

<body>
    <h1>Reload Page in JavaScript after 5 Seconds</h1>

    <script type="text/javascript">
        // Reload the page after 5 seconds
        setTimeout(function () {
            location.reload();
        }, 5000);
    </script>
</body>

</html>

أعد تحميل الصفحة باستخدام JavaScript History.go​

يقوم History.go() بتحميل صفحة معينة من خلال فهرس الجلسة الخاص بها. تتلقى هذه الطريقة فهرس الجلسة الاختياري. في هذه المقالة، يتم استخدامه لإعادة تحميل الصفحة الحالية عن طريق تمرير فهرس الجلسة بالقيمة 0. إذا كان فهرس الجلسة فارغًا أو 0، فسيقوم استدعاء الأسلوب هذا بمحاكاة تأثير location.reload().

كود JavaScript أدناه يستدعي History.go() مع مؤقت:
HTML:
<!DOCTYPE html>
<html>

<head>
    <title>Reload Page in JavaScript after Seconds using history function</title>
</head>

<body>
    <h1>Reload Page in JavaScript after 5 Seconds using history function</h1>

    <script type="text/javascript">
        // Reload the page after 5 seconds using history function
        setTimeout(function () {
            history.go(0);
        }, 5000);
    </script>
</body>

</html>

إعادة تحميل الصفحة باستخدام طريقة الاستطلاع​

بدلًا من JavaScript setTimeout()، يمكننا أيضًا استخدام التابع setInterval() لاستدعاء إعادة التحميل على فترات زمنية دورية. يعطي setInterval() مخرجات أقرب نسبيًا (أحيانًا يتأخر اعتمادًا على العملية التي تتم على الخيط الرئيسي، إن وجدت). لقد رأينا تفاصيل التعليمات البرمجية "كيفية الانتظار ثانية واحدة في JavaScript".

يستخدم رمز المثال هذا JavaScript setInterval() لتكرار الاستقصاء في فاصل زمني قدره 3000 مللي ثانية. تقوم الدالة fetchData() بإنشاء رقم عشوائي واستدعاء طريقة لتحديث محتوى الصفحة. يبحث الاستقصاء عن الرقم العشوائي الجديد الذي تم إنشاؤه ويقوم بتحديث واجهة المستخدم بشكل دوري.
HTML:
<!DOCTYPE html>
<html>

<head>
    <title>Polling Example that uses periodic calls after 3 secs</title>
    <script type="text/javascript">
        function fetchData() {
            // Simulating AJAX request to fetch data from the server
            // This is a stub - replace this with your own AJAX implementation
            setTimeout(function () {
                // this is sample data from server
                // I am just using random to simulate it
                var data = Math.random();
                updatePage(data); // Call function to update the page with the fetched data
            }, 3000); // Polling interval: 3 seconds (3000 milliseconds)
        }

        function updatePage(data) {
            // Update the page with the fetched data
            document.getElementById("data-container").innerHTML = data;
        }

        // Start the polling when the page loads
        window.onload = function () {
            fetchData();
            setInterval(fetchData, 3000); // Repeat the polling every 3 seconds
        };
    </script>
</head>

<body>
    <h1>Polling Example - Refresh after 3 seconds</h1>
    <p>How to use polling to periodically fetch new data from a server and update the page without reloading it.</p>
    <div id="data-container"></div>
</body>

</html>
 

ما هو انكور؟

هو منتدى عربي تطويري يرتكز على محتويات عديدة لاثراء الانترنت العربي، وتقديم الفائدة لرواد الانترنت بكل ما يحتاجوه لمواقعهم ومنتدياتهم واعمالهم المهنية والدراسية. ستجد لدينا كل ما هو حصري وكل ما هو مفيد ويساعدك على ان تصل الى وجهتك، مجانًا.
عودة
أعلى