recent
أخبار ساخنة

التعرف على setTimeout javascript في جافاسكربت JavaScript الدرس |24|

الصفحة الرئيسية

setTimeout في جافاسكربت

في درسنا اليوم سوف نتحدث عن 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.

لنعمل نفس الأمر السابق لكن عبر زر 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
google-playkhamsatmostaqltradent