توضيح حول إستعمال setTimeout

محمود_سعداوي · 3 سبتمبر 2022

السلام عليكم.

في الكود التالي

let arr = ["ahmed","mohamed","mahmoud","ali","omar"]
const btn = document.querySelector('button')

function sayHello() {
    let i=0
    btn.addEventListener('click', ()=>{
        console.log(`Hello I'm ${arr[i]}`)
        i++
    })
}
setTimeout(sayHello,3000)

عندما أضغط على الزر تظهر الرسالة مباشرة و ليس بعد 3 ثواني.

الرجاء المساعدة و شكرا.

Wael Aljamal · 3 سبتمبر 2022

في الشيفرة الحالية أنت تقوم بتأخير تنفيذ sayHello ل 3 ثواني، أي عملية إسناد مستمع النقر للزر هو من يتأخر،

اذا ضغط على الزر بعد تحديث الصفحة قبل مرور 3 ثواني لن يحصل استجابة لأنه حينها لا يوجد شيء اسمه click للزر

لاحقاً عند النقر على الزر سيتم تحقيق الاستجابة مباشرة للدالة callback وهي الطباعة و زيادة العداد i

التصحيح للبرنامج:

sayHello مسؤولة فقط عن الطباعة وزيادة i
عند النقر على الزر نستدعي setTimeout التي بدورها تستدعي sayHello بعد تأخير 3 ثواني

<!DOCTYPE html>
<html>

<body>



    <button id="demo"> btn </button>

    <script>
        let arr = ["ahmed", "mohamed", "mahmoud", "ali", "omar"]
        const btn = document.querySelector('button')

        let i = 0;
        function sayHello() {
            console.log(`Hello I'm ${arr[i]}`);
            i++;
            if (i == 4) i = 0;

        }
        btn.addEventListener('click', () => {
            setTimeout(sayHello, 3000);
            // sayHello();
        })
        setTimeout(sayHello, 3000);
    </script>

</body>

</html>

/****** مثال آخر *******/

لكي تجعل البرنامج يطبع قيمة الاسم بشكل مختلف كلما قام المستخدم بالنقر على الزر يمكنك تعديل البرنامج كالتالي:

نقوم بتعرف مستمع حدث النقر مباشرة
تعريف المتغير i خارج الدالة لكي لا يتم إسناد قيمة 0 لها كل مرة
نتأكد أن i لن تخرج من حدود المصفوفة
الدالة مسؤولة عن تغيير قيمة i
استخدمت setInterval ليتم تنفيذها بشكل متكرر كل 3 ثواني و تغيير رقم الشخص / الاسم

<!DOCTYPE html>
<html>

<body>

    <button id="demo"> btn </button>

    <script>
        let arr = ["ahmed1", "ahmed2", "ahmed3", "ahmed4", "ahmed5"]
        const btn = document.querySelector('button')
		let i = 0;
      
        btn.addEventListener('click', () => {
            console.log(`Hello I'm ${arr[i]}`)
        })

        
        function sayHelloToNextPerson() {
            i++
            if (i == 4) i = 0;
        }
        setInterval(sayHelloToNextPerson, 3000)
    </script>

</body>

</html>

توضيح حول إستعمال setTimeout

السؤال

محمود_سعداوي

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

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

1 جواب على هذا السؤال

Recommended Posts

Wael Aljamal

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية