شرح setTimeout - طريقة إستخدامها و كيفية إلغائها

setTimeout هي function كاينة في javascript كاتمكنك من أنك تنفد ألاوامر بعد مدة زمنية محددة. فهاد المقال غانتعرفو على طريقة عملها و كيفية إستخدامها.

طريقة إستخدام setTimeout :

فهاد المثال غادي نكتبو في ل console هاد الجملة Hello world بعد 3 ثواني.

setTimeout(function(){
    console.log("Hello World");
}, 3000);

إنطلاقا من هاد المثال بإمكانا نقولو ان setTimeout كاتكتب على هاد الشكل:

setTimeout(function , المدة الزمنية);

• function : هي اللي كايكون فيها ل code اللي بغيتيه إتنفد من بعد المدة الزمنية.

• المدة الزمنية : هي الوقت اللي بغيتيه إدوز عاد إتنفد ل code. كايتكتب بالميليسوكوند millisecond , كل 1000 millisecond كاتساوي ثانية واحدة.

ل function بإمكانك تكتبها مباشرة في setTimeout بحال هاد الشكل.

setTimeout(function(){ 
    console.log("Hello World");
}, 3000);

أو تكتبها بوحدها و تعطي ل setTimeout الإسم ديالها :

function hello(){
  console.log("Hello World");
}

setTimeout(hello, 3000);

الأن نفتارضو عندنا function كاتقبل في ل parameters ديالها إسم, مثلا عطيناها Hassan , غاتكتب في ل console هاد الجملة Hello Hassan. ل function غاتكون على هاد الشكل:

function hello(name){
 console.log("Hello " + name);
}

إلى بغينا نفدو هاد ل function بعد مدة زمنية بإستخدام setTimeout. ربما غاضنو اننا غانكتبوها بهاد الطريقة :

setTimeout(hello("Hassan"), 3000);

إلى كتبتيها بهاد الطريقة, ل function غاتنفد مباشرة بدون إنتظار المدة الزمنية, لأن javascript ملي كايشوف شي function عندها الأقواس كايقوم بالتنفيد ديالها مباشرة. إذا كيفاش غانعطيوها ل parameters ؟

قلت ان setTimeout كاتقبل function و كاتقبل مدة زمنية , اللي ما قلتوش هو ان أي حاجة جات من بعدهم كاتعتابر parameter ديال ل function. إذا ل code غايتكتب بهاد الشكل:

setTimeout(hello, 3000, "Hassan");

طريقة إلغاء setTimeout :

الأن غانشوفو كيفاش نلغيو أو نوقفو العمل ديال setTimeout قبل إنتهاء المدة الزمنية. مثلا عطينا ل setTimeout واحد ل function و قلنالها تنفدها بعد 7 ثوان , و لسبب ما قررنا نلغيوها قبل ما تتنفد.

ملي كانخدمو setTimeout كاترد لينا ID خاص بها اللي هو مجرد رقم, وبإستخدام هاد ل ID بإمكانا نلغيوها.

const timeoutId = setTimeout(function(){
    console.log("Hello World");
  }, 7000);

فهاد المثال قمنا بحفض ل ID ديال setTimeout في متغير سميناه timeoutId.

الأن باش نلغيوها غانستاعنو ب clearTimeout اللي المهمة ديالها الوحيدة هي تلغي العمل ديال setTimeout .

هاد clearTimeout كاتقبل في ل parameters ديالها حاجة وحدة اللي هي ل ID ديال setTimeout اللي بغينا نلغيو.

clearTimeout(timeoutId);

بهاد الشكل غانكونو لغينا العمل ديال setTimeout.