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

محمود سعداوي2 · 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

السؤال

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

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

Recommended Posts

Wael Aljamal

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية