مشكلة في سرعة تنفيذ التابع وتحديث الصفحة في جافاسكريبت

Shahad Mohammad · 20 مايو 2022

اقوم بعمل مشروع html ,css ,js لكن عندما اتعامل مع الجافا سكربت، مثلا اضع بوتون وهذا البتن عند الضغط علية يتم تنفيذ داله، الذي يحصل معي انه عند الضغط على البوتون يقوم بتنفيذ الداله بشكل سريع اقل من ثانية ويقوم بتحديث الصفحة مباشرة ، لا اعلم لماذا يقوم بتحديث الصفحة ؟ وكيف اصلح هذا الامر

تم التعديل في 20 مايو 2022 بواسطة Hassan Hedr
توضيح العنوان

Hassan Hedr · 20 مايو 2022

يرجى إرفاق الشيفرة ضمن نص السؤال حتى يتوضح استفسارك وتحصلين على حل للمشكلة

Shahad Mohammad · 20 مايو 2022

بتاريخ 2 دقائق مضت قال Hassan Hedr:

يرجى إرفاق الشيفرة ضمن نص السؤال حتى يتوضح استفسارك وتحصلين على حل للمشكلة

المشكلة ليست بالكود المشكلة انه لماذا ينفذ بشكل سريع جدا ويحدث الصفحة مباشرة ويختفي ما يقوم به الكود ؟ لكن هذا هو الكود

 <body>
        
        <input type="text" id="txtVal">
        <button onclick="addLi()">Add</button>
        
        <ul id="list">
            <li>1</li>
            <li>22</li>
            <li>50</li>
        </ul>
        
        <script>
            
            function addLi()
            {

                var txtVal = document.getElementById('txtVal').value,
                    listNode = document.getElementById('list'),
                    liNode = document.createElement("LI"),
                    txtNode = document.createTextNode(txtVal);
            
                 liNode.appendChild(txtNode);
                 listNode.appendChild(liNode);
            
            }
            
        </script>
       
    </body>

Hassan Hedr · 20 مايو 2022

بتاريخ 9 دقائق مضت قال Shahad Mohammad:

المشكلة ليست بالكود المشكلة انه لماذا ينفذ بشكل سريع جدا ويحدث الصفحة مباشرة ويختفي ما يقوم به الكود ؟ لكن هذا هو الكود


 <body>
        
        <input type="text" id="txtVal">
        <button onclick="addLi()">Add</button>
        
        <ul id="list">
            <li>1</li>
            <li>22</li>
            <li>50</li>
        </ul>
        
        <script>
            
            function addLi()
            {

                var txtVal = document.getElementById('txtVal').value,
                    listNode = document.getElementById('list'),
                    liNode = document.createElement("LI"),
                    txtNode = document.createTextNode(txtVal);
            
                 liNode.appendChild(txtNode);
                 listNode.appendChild(liNode);
            
            }
            
        </script>
       
    </body>

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

يمكنك إذا أردت إضافة تأخير يدوي بشكل مقصود لمحاكاة عملية التأخر في وصول الرد بالاستفادة من التابع setTimeout كالتالي:

<button onclick="setTimeout(addLi, 1000)">Add</button>
                 ^^^^^^^^^^      ^^^^^^^

ستلاحظين تأخر لمدة ثانية قبل إضافة المهمة للقائمة

مشكلة في سرعة تنفيذ التابع وتحديث الصفحة في جافاسكريبت

السؤال

Shahad Mohammad

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Hassan Hedr

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Shahad Mohammad

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hassan Hedr

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية