setTimeout في جافاسكربت
الشكل العام له :
setTimeout(run function or method, عدد الثواني);
استخدام setTimeout عبر function
function tech(){
alert("تجربة");
}
setTimeout(tech,4000);
ونتيجة التصفح
في مثالنا السابق سوف يتنفذ الأمر مرة واحدة فقط و يتوقف بعكس setInterval الذي عرفناها في الدروس السابقة.
إيقاف تنفيذ الأمر في function
لإيقاف تنفيذ الأوامر قبل تنفيذها نستخدم clearTimeout كما سوف نلاحظه في المثال التالي
function tech(){
alert("تجربة");
}
var timeOut = setTimeout(tech,4000);
clearTimeout(timeOut);
clearTimeout(timeOut);
هكذا لن تعمل الأوامر لأننا أوقفناها عبر الامر clearTimeout.
لنعمل نفس الأمر السابق لكن عبر زر button و عند الضغط عليه يوقف العملية عبر الخاصية onclick .
<body>
<button onclick="clearTimeOut()">اضغط للحذف</button>
</body>
وفي ملف الجافاسكربت
function tech(){
alert("تجربة");
}
var timeOut = setTimeout(tech,4000);
function clearTimeOut(){
clearTimeout(timeOut);
}
عند فتحه في المتصفح
عند الضغط على هذا الزر لن يتم تنفيذ الأوامر اطلاقاً لأننا وضعنا اوامر عند الضغط عليه لن تعمل الأوامر.
استخدام setTimeout عبر class
class MyPage{
constructor(){
var myTimeOut = setTimeout(()=>{
this.testTimeOut();
},4000);
}
testTimeOut(){
alert("يعمل بشكل صحيح");
}
}
onload = new MyPage();
نتيجة المتصفح تكون
إيفاف تنفيذ الأمر في class
لإيقاف العنصر عند النقر على الزر نضع له id
<body>
<button id="stop_timeOut"></button>
</body>
و في ملف الجافاسكربت
class MyPage{
constructor(){
var myTimeOut = setTimeout(()=>{
this.testTimeOut();
},4000);
document.getElementById("stop_timeOut").addEventListener("click",function(){
clearTimeout(myTimeOut);
});
}
testTimeOut(){
alert("يعمل بشكل صحيح");
}
}
onload = new MyPage();
الأمثلة السابقة لا تحتاج لشرح أبداً لأننا درسناها بالتفصيل في دروس سابقة.
ملاحظة :
ميزة setTimeout تعمل كـ مؤقت لتنفيذ الأوامر الموضوعه به و تنفذ الأوامر مرة واحدة فقط بعد المدة المحددة له ولا يعيد التكرار أي يكون بعكس setInterval الذي يبقى يكرر الأوامر حسب المدة الموضوعة له إلى لا نهاية.
قناتنا التلغرام
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997
ليست هناك تعليقات:
إرسال تعليق