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

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الأحد، 10 مايو 2020

التعرف على 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

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام